resize

示例(Examples)

¥Examples

全方位调整大小(Resizing in all directions)

¥Resizing in all directions

使用 resize 使元素水平和垂直可调整大小：

¥Use resize to make an element horizontally and vertically resizable:

<textarea class="resize rounded-md ..."></textarea>

垂直调整大小(Resizing vertically)

¥Resizing vertically

使用 resize-y 使元素垂直可调整大小：

¥Use resize-y to make an element vertically resizable:

<textarea class="resize-y rounded-md ..."></textarea>

水平调整大小(Resizing horizontally)

¥Resizing horizontally

使用 resize-x 使元素水平可调整大小：

¥Use resize-x to make an element horizontally resizable:

<textarea class="resize-x rounded-md ..."></textarea>

防止调整大小(Prevent resizing)

¥Prevent resizing

使用 resize-none 防止元素可调整大小：

¥Use resize-none to prevent an element from being resizable:

<textarea class="resize-none rounded-md"></textarea>

响应式设计(Responsive design)

¥Responsive design

在 resize 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<div class="resize-none md:resize ...">
  <!-- ... -->
</div>

请参阅 变体文档 详细了解如何使用变体。