Divider分割线

区隔内容的分割线。

何时使用#

  • 对不同章节的文本段落进行分割。
  • 对行内文字/链接进行分割，例如表格的操作列。
import { NzDividerModule } from 'ng-zorro-antd/divider';

代码演示

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

With Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Add

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

水平分割线

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

expand codeexpand code
      加载中
Text LinkLink
垂直分割线

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

expand codeexpand code
      加载中

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Left Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Right Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

标题位置

修改分割线标题的位置。

expand codeexpand code
      加载中

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Left Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Right Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

分割文字使用正文样式

使用 nzPlain 可以设置为更轻量的分割文字样式。

expand codeexpand code
      加载中

API#

nz-divider#

参数说明类型默认值
[nzDashed]是否虚线booleanfalse
[nzType]水平还是垂直类型'horizontal' | 'vertical''horizontal'
[nzText]中间文字string | TemplateRef<void>-
[nzPlain]文字是否显示为普通正文样式booleanfalse
[nzOrientation]中间文字方向'center' | 'left' | 'right''center'