# 分隔线

视觉或语义上分隔内容。

```jsx
<Text size="2">
  构建高质量、可访问的用户界面的工具。
  <Separator my="3" size="4" />
  <Flex gap="3" align="center">
    主题
    <Separator orientation="vertical" />
    原语
    <Separator orientation="vertical" />
    图标
    <Separator orientation="vertical" />
    颜色
  </Flex>
</Text>
```

## [API 参考](#api-参考)

此组件继承自 [Separator primitive](/primitives/docs/components/separator) 的属性，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

| Prop          | Type                                     | Default        |
| ------------- | ---------------------------------------- | -------------- |
| `orientation` | `Responsive<"horizontal" \| "vertical">` | `"horizontal"` |
| `size`        | `Responsive<"1" \| "2" \| "3" \| "4">`   | `"1"`          |
| `color`       | `enum`                                   | `"gray"`       |
| `decorative`  | `boolean`                                | `true`         |

## [示例](#示例)

### [大小](#大小)

使用 `size` 属性来控制分隔线的大小。最大步长会占满容器的宽度或高度。

```jsx
<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>
```

```jsx
<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` 属性为分隔线分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<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` 属性来控制分隔线是水平还是垂直。

```jsx
<Flex align="center" gap="4">
  <Separator orientation="horizontal" />

  <Separator orientation="vertical" />
</Flex>
```

<!--$-->

<!--/$-->