互动性
field-sizing
用于控制表单控件大小的工具。
| 类 | 样式 |
|---|---|
field-sizing-fixed | field-sizing: fixed; |
field-sizing-content | field-sizing: content; |
示例(Examples)
¥Examples
根据内容调整大小(Sizing based on content)
¥Sizing based on content
使用 field-sizing-content 工具允许表单控件根据内容调整其大小：
¥Use the field-sizing-content utility to allow a form control to adjust it's size based on the content:
输入下面的输入以查看大小变化
<textarea class="field-sizing-content ..." rows="2">Latex Salesman, Vanderlay Industries</textarea>使用固定大小(Using a fixed size)
¥Using a fixed size
使用 field-sizing-fixed 工具使来自控件使用固定大小：
¥Use the field-sizing-fixed utility to make a from control use a fixed size:
输入下面的输入以查看大小保持不变
<textarea class="field-sizing-fixed w-80 ..." rows="2">Latex Salesman, Vanderlay Industries</textarea>响应式设计(Responsive design)
¥Responsive design
在 field-sizing 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<input class="field-sizing-content md:field-sizing-fixed ..." />请参阅 变体文档 详细了解如何使用变体。