1. 交互
  2. 表单尺寸

交互

字段大小调整

用于控制表单控件大小的工具类。

ClassStyles
field-sizing-fixed
field-sizing: fixed;
field-sizing-content
field-sizing: content;

示例

基于内容的大小调整

使用 field-sizing-content 工具类,使表单控件的大小根据内容进行调整:

在下面的输入框中输入内容以查看大小变化

<textarea class="field-sizing-content ..." rows="2">  Latex Salesman, Vanderlay Industries</textarea>

使用固定大小

使用 field-sizing-fixed 工具类,使表单控件采用固定大小:

在下面的输入框中输入内容以查看大小保持不变

<textarea class="field-sizing-fixed w-80 ..." rows="2">  Latex Salesman, Vanderlay Industries</textarea>

响应式设计

Prefix a field-sizing utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<input class="field-sizing-content md:field-sizing-fixed ..." />

Learn more about using variants in the variants documentation.