---
title: Divider 分割线
order: 18
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## TODO

确定分割线的 `margin` 值。

## 使用

### 使用原则

默认为水平分割线，分割线颜色为 `E7E7E7`。

> > > > > > > 6311a39a77e94a8c3293d53d04989673a9fcf5b8

### 基本使用

```jsx
import React from 'react';
import { Divider } from 'quanta-design';

export default () => (
  <div>
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
    <Divider />
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
    <Divider />
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
  </div>
);
```

### 虚线分割线

```jsx
import React from 'react';
import { Divider } from 'quanta-design';

export default () => (
  <div>
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
    <Divider dashed />
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
    <Divider dashed />
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
  </div>
);
```

### 垂直分割线

```jsx
import React from 'react';
import { Divider } from 'quanta-design';

export default () => (
  <div>
    <a href="#">菜单一</a>
    <Divider type="vertical" />
    <a href="#">菜单二</a>
    <Divider type="vertical" />
    <a href="#">菜单三</a>
  </div>
);
```

### 带文字的分割线

```jsx
import React from 'react';
import { Divider } from 'quanta-design';

export default () => (
  <div>
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
    <Divider orientation="left">左边</Divider>
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
    <Divider orientation="center">中间</Divider>
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
    <Divider orientation="right">右边</Divider>
    <p>
      这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字这是一个很长很长很长的文字
    </p>
  </div>
);
```