Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

分隔符

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

View sourceReport an issueView in Playground
Tools for building high-quality, accessible UI.
ThemesPrimitivesIconsColors
<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 参考

¥API Reference

此组件继承了 Separator 基础组件 的属性并支持 常用边距属性。

¥This component inherits props from the Separator primitive and supports common margin props.

PropTypeDefault
orientation
Responsive<"horizontal" | "vertical">
"horizontal"
size
Responsive<"1" | "2" | "3" | "4">
"1"
color
enum
"gray"
decorative
boolean
true

示例

¥Examples

尺寸

¥Size

使用 size 属性控制分隔符的大小。最大步长占用容器的整个宽度或高度。

¥Use the size prop to control the size of the separator. The largest step takes full width or height of the container.

<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

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific 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

使用 orientation 属性控制分隔符是水平还是垂直。

¥Use the orientation prop to control whether the separator is horizontal or vertical.

<Flex align="center" gap="4">

	<Separator orientation="horizontal" />

	<Separator orientation="vertical" />

</Flex>
Previous选择
Next骨架