视觉上或语义上分隔内容。
<Text size="2">
Tools for building high-quality, accessible UI.
<Separator my="3" size="4" />
<Flex gap="3" align="center">
Themes
<Separator orientation="vertical" />
Primitives
<Separator orientation="vertical" />
Icons
<Separator orientation="vertical" />
Colors
</Flex>
</Text>
| 属性 | 类型 | 默认值 |
|---|---|---|
方向 | 响应式<"horizontal" | "vertical"> | "horizontal" |
尺寸 | 响应式<"1" | "2" | "3" | "4"> | "1" |
颜色 | 枚举 | "gray" |
装饰性 | 布尔值 | 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>