视觉或语义上分隔内容。
<Text size="2">
构建高质量、可访问的用户界面的工具。
<Separator my="3" size="4" />
<Flex gap="3" align="center">
主题
<Separator orientation="vertical" />
原语
<Separator orientation="vertical" />
图标
<Separator orientation="vertical" />
颜色
</Flex>
</Text>
此组件继承自 Separator primitive 的属性，并支持 常见边距属性。
| Prop | Type | Default |
|---|---|---|
orientation | Responsive<"horizontal" | "vertical"> | "horizontal" |
size | Responsive<"1" | "2" | "3" | "4"> | "1" |
color | enum | "gray" |
decorative | boolean | true |
使用 size 属性来控制分隔线的大小。最大步长会占满容器的宽度或高度。
<Flex direction="column" gap="4">
<Separator orientation="horizontal" size="1" />
<Separator orientation="horizontal" size="2" />
<Separator orientation="horizontal" size="3" />
<Separator orientation="horizontal" size="4" />
</Flex>
<Flex align="center" gap="4" height="96px">
<Separator orientation="vertical" size="1" />
<Separator orientation="vertical" size="2" />
<Separator orientation="vertical" size="3" />
<Separator orientation="vertical" size="4" />
</Flex>
使用 color 属性为分隔线分配特定的 颜色。
<Flex direction="column" gap="3">
<Separator color="indigo" size="4" />
<Separator color="cyan" size="4" />
<Separator color="orange" size="4" />
<Separator color="crimson" size="4" />
</Flex>
使用 orientation 属性来控制分隔线是水平还是垂直。
<Flex align="center" gap="4">
<Separator orientation="horizontal" />
<Separator orientation="vertical" />
</Flex>