Divider分割线

区隔内容的分割线。

何时使用

  • 对不同章节的文本段落进行分割。
  • 对行内文字/链接进行分割,例如表格的操作列。

单独引入此组件

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

  1. import { NzDividerModule } from 'ng-zorro-antd/divider';

代码演示

Divider分割线 - 图1

水平分割线

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-divider-horizontal',
  4. template: `
  5. <div>
  6. <p>
  7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
  8. sunt a te dicta? Refert tamen, quo modo.
  9. </p>
  10. <nz-divider></nz-divider>
  11. <p>
  12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
  13. sunt a te dicta? Refert tamen, quo modo.
  14. </p>
  15. <nz-divider nzText="With Text"></nz-divider>
  16. <p>
  17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
  18. sunt a te dicta? Refert tamen, quo modo.
  19. </p>
  20. <nz-divider nzDashed [nzText]="text">
  21. <ng-template #text><i nz-icon nzType="plus"></i> Add</ng-template>
  22. </nz-divider>
  23. <p>
  24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
  25. sunt a te dicta? Refert tamen, quo modo.
  26. </p>
  27. </div>
  28. `
  29. })
  30. export class NzDemoDividerHorizontalComponent {}

Divider分割线 - 图2

标题位置

修改分割线标题的位置。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-divider-orientation',
  4. template: `
  5. <div>
  6. <nz-divider nzText="Left Text" nzOrientation="left"></nz-divider>
  7. <p>
  8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
  9. sunt a te dicta? Refert tamen, quo modo.
  10. </p>
  11. <nz-divider nzText="Right Text" nzOrientation="right"></nz-divider>
  12. <p>
  13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
  14. sunt a te dicta? Refert tamen, quo modo.
  15. </p>
  16. </div>
  17. `
  18. })
  19. export class NzDemoDividerOrientationComponent {}

Divider分割线 - 图3

垂直分割线

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-divider-vertical',
  4. template: `
  5. <div>
  6. Text
  7. <nz-divider nzType="vertical"></nz-divider>
  8. <a href="#">Link</a>
  9. <nz-divider nzType="vertical"></nz-divider>
  10. <a href="#">Link</a>
  11. </div>
  12. `
  13. })
  14. export class NzDemoDividerVerticalComponent {}

API

nz-dividercomponent

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