捕获多行用户输入。
<TextArea placeholder="Reply to comment…" />
此组件基于 textarea 元素，并支持 常见的边距属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
size | 响应式<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
resize | 响应式<"none" | "vertical" | "horizontal" | "both"> | 无默认值 |
color | 枚举 | 无默认值 |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
使用 size 属性控制尺寸。
<Flex direction="column" gap="3">
<Box maxWidth="200px">
<TextArea size="1" placeholder="Reply to comment…" />
</Box>
<Box maxWidth="250px">
<TextArea size="2" placeholder="Reply to comment…" />
</Box>
<Box maxWidth="300px">
<TextArea size="3" placeholder="Reply to comment…" />
</Box>
</Flex>
使用 variant 属性控制视觉样式。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea variant="surface" placeholder="Reply to comment…" />
<TextArea variant="classic" placeholder="Reply to comment…" />
<TextArea variant="soft" placeholder="Reply to comment…" />
</Flex>
使用 color 属性分配特定的 颜色。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea color="blue" variant="soft" placeholder="Reply to comment…" />
<TextArea color="green" variant="soft" placeholder="Reply to comment…" />
<TextArea color="red" variant="soft" placeholder="Reply to comment…" />
</Flex>
使用 radius 属性分配特定的圆角值。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea radius="none" placeholder="Search the docs…" />
<TextArea radius="large" placeholder="Search the docs…" />
<TextArea radius="full" placeholder="Search the docs…" />
</Flex>
使用 resize 属性在一个或两个轴上启用调整大小。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea resize="none" placeholder="Search the docs…" />
<TextArea resize="vertical" placeholder="Search the docs…" />
<TextArea resize="horizontal" placeholder="Search the docs…" />
<TextArea resize="both" placeholder="Search the docs…" />
</Flex>