组件

分隔符

在视觉上或语义上分隔内容。

用于构建高质量、可访问的 UI 的工具。
主题原始组件图标颜色
<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>

API 参考

此组件继承自分隔符原始组件的属性,并支持通用的边距属性。

属性类型默认值
方向
Responsive<"horizontal" | "vertical">
"horizontal"
尺寸
Responsive<"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>
上一个Select
下一个Skeleton