Divider分割线

区隔内容的分割线。

何时使用

  • 对不同章节的文本段落进行分割。

  • 对行内文字/链接进行分割,例如表格的操作列。

代码演示

Divider分割线 - 图1

水平分割线

默认为水平分割线,可在中间加入文字。

  1. import { Divider } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <p>
  5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
  6. probare, quae sunt a te dicta? Refert tamen, quo modo.
  7. </p>
  8. <Divider />
  9. <p>
  10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
  11. probare, quae sunt a te dicta? Refert tamen, quo modo.
  12. </p>
  13. <Divider dashed />
  14. <p>
  15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
  16. probare, quae sunt a te dicta? Refert tamen, quo modo.
  17. </p>
  18. </div>,
  19. mountNode,
  20. );

Divider分割线 - 图2

垂直分割线

使用 type="vertical" 设置为行内的垂直分割线。

  1. import { Divider } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. Text
  5. <Divider type="vertical" />
  6. <a href="#">Link</a>
  7. <Divider type="vertical" />
  8. <a href="#">Link</a>
  9. </div>,
  10. mountNode,
  11. );

Divider分割线 - 图3

带文字的分割线

分割线中带有文字,可以用 orientation 指定文字位置。

  1. import { Divider } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <p>
  5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
  6. probare, quae sunt a te dicta? Refert tamen, quo modo.
  7. </p>
  8. <Divider>Text</Divider>
  9. <p>
  10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
  11. probare, quae sunt a te dicta? Refert tamen, quo modo.
  12. </p>
  13. <Divider orientation="left">Left Text</Divider>
  14. <p>
  15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
  16. probare, quae sunt a te dicta? Refert tamen, quo modo.
  17. </p>
  18. <Divider orientation="right">Right Text</Divider>
  19. <p>
  20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
  21. probare, quae sunt a te dicta? Refert tamen, quo modo.
  22. </p>
  23. </div>,
  24. mountNode,
  25. );

API

参数说明类型默认值版本
className分割线样式类string-3.5.4
dashed是否虚线booleanfalse
orientation分割线标题的位置enum: left rightcenter3.4.1
style分割线样式对象object-3.5.4
type水平还是垂直类型enum: horizontal verticalhorizontal