<TextArea placeholder="回复评论…" />
该组件基于 textarea 元素，并支持 常见的边距属性。
| Prop | Type | Default |
|---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
resize | Responsive<"none" | "vertical" | "horizontal" | "both"> | No default value |
color | enum | No default value |
radius | "none" | "small" | "medium" | "large" | "full" | No default value |
使用 size 属性来控制大小。
<Flex direction="column" gap="3">
<Box maxWidth="200px">
<TextArea size="1" placeholder="回复评论…" />
</Box>
<Box maxWidth="250px">
<TextArea size="2" placeholder="回复评论…" />
</Box>
<Box maxWidth="300px">
<TextArea size="3" placeholder="回复评论…" />
</Box>
</Flex>
使用 variant 属性来控制视觉风格。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea variant="surface" placeholder="回复评论…" />
<TextArea variant="classic" placeholder="回复评论…" />
<TextArea variant="soft" placeholder="回复评论…" />
</Flex>
使用 color 属性分配特定的 颜色。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea color="blue" variant="soft" placeholder="回复评论…" />
<TextArea color="green" variant="soft" placeholder="回复评论…" />
<TextArea color="red" variant="soft" placeholder="回复评论…" />
</Flex>
使用 radius 属性分配特定的半径值。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea radius="none" placeholder="搜索文档…" />
<TextArea radius="large" placeholder="搜索文档…" />
<TextArea radius="full" placeholder="搜索文档…" />
</Flex>
使用 resize 属性启用一个或两个轴上的大小调整。
<Flex direction="column" gap="3" maxWidth="250px">
<TextArea resize="none" placeholder="搜索文档…" />
<TextArea resize="vertical" placeholder="搜索文档…" />
<TextArea resize="horizontal" placeholder="搜索文档…" />
<TextArea resize="both" placeholder="搜索文档…" />
</Flex>