---
title: Divider - 分割线
order: 6
path: /divider
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 2
  path: /universal
  title: 通用组件
---

分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构

## 基础分割线

基础分割线是没有文字的独立线条，又分为水平分割线和垂直分割线。

### 水平分割线

水平分割线常用来对不同元素内容进行分割

<code src='./demos/level.tsx'  height='400px'>

### 垂直分割线

垂直分割线常用来做行内分割

<code src='./demos/vertical.tsx' background="#fff" height='400px'>

### 带文字的分割线

带文字的分割线是在分割线中嵌入文字，在需要对分割内容进行解释说明时使用。

<code src='./demos/text.tsx' background="#fff" height='400px'>

### API

| 参数              | 说明                                                                                            | 类型                          | 默认值       | 版本  |
| ----------------- | ----------------------------------------------------------------------------------------------- | ----------------------------- | ------------ | ----- |
| children          | 嵌套的标题                                                                                      | ReactNode                     | -            |       |
| className         | 分割线样式类                                                                                    | string                        | -            |       |
| dashed            | 是否虚线                                                                                        | boolean                       | false        |       |
| orientation       | 分割线标题的位置                                                                                | `left` \| `right` \| `center` | `center`     |       |
| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number              | -            |       |
| plain             | 文字是否显示为普通正文样式                                                                      | boolean                       | false        | 4.2.0 |
| style             | 分割线样式对象                                                                                  | CSSProperties                 | -            |       |
| type              | 水平还是垂直类型                                                                                | `horizontal` \| `vertical`    | `horizontal` |       |