Divider分割线

区隔内容的分割线。

何时使用

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

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

代码演示

水平分割线

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-divider-horizontal',
  template: `
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzText="With Text"></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzDashed [nzText]="text">
        <ng-template #text><i nz-icon nzType="plus"></i> Add</ng-template>
      </nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
    </div>
  `
})
export class NzDemoDividerHorizontalComponent {}

垂直分割线

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-divider-vertical',
  template: `
    <div>
      Text
      <nz-divider nzType="vertical"></nz-divider>
      <a href="#">Link</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a href="#">Link</a>
    </div>
  `
})
export class NzDemoDividerVerticalComponent {}

标题位置

修改分割线标题的位置。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-divider-orientation',
  template: `
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzText="Text"></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzText="Left Text" nzOrientation="left"></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzText="Right Text" nzOrientation="right"></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
    </div>
  `
})
export class NzDemoDividerOrientationComponent {}

分割文字使用正文样式

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-divider-plain',
  template: `
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzPlain nzText="Text"></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzPlain nzText="Left Text" nzOrientation="left"></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
      <nz-divider nzPlain nzText="Right Text" nzOrientation="right"></nz-divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
        tamen, quo modo.
      </p>
    </div>
  `
})
export class NzDemoDividerPlainComponent {}

API

nz-dividercomponent