> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/divider.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Divider 分割线

分隔内容、段落或一组操作。

## 基础用法


项目信息

设置

更多内容

编辑分享归档

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/divider/basic.tsx"
import { Divider, Space } from '@ifhover/leaf-ui';

export function DividerBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <p>项目信息</p>
      <Divider>设置</Divider>
      <Divider align="start" dashed>
        更多内容
      </Divider>
      <div>
        编辑
        <Divider type="vertical" />
        分享
        <Divider type="vertical" dashed />
        归档
      </div>
    </Space>
  );
}
```

展开代码

## Divider API

| 属性         | 类型                             | 默认值            | 说明        |
| ---------- | ------------------------------ | -------------- | --------- |
| `type`     | `'horizontal' \| 'vertical'`   | `'horizontal'` | 分割方向      |
| `align`    | `'start' \| 'center' \| 'end'` | `'center'`     | 文字位置      |
| `dashed`   | `boolean`                      | `false`        | 虚线样式      |
| `children` | `ReactNode`                    | —              | 水平分割线上的文字 |

## 类型

定义组件属性或组装列表时可导入相关类型。

```ts
import type { DividerProps } from '@ifhover/leaf-ui';
```

## 使用说明

垂直分割线适合放在行内内容之间。