Divider

A divider line separates different content.

When To Use#

  • Divide sections of article.
  • Divide inline text and links such as the operation column of table.

Import this Component Individually#

You can get more detail here.

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

Examples

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.

Divider default type is horizontal. Support inner text inside Divider.

expand codeexpand code
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 {}
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.

Set orientation of divider to left or right.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-divider-orientation',
  template: `
    <div>
      <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 {}
Text LinkLink

Use nzType="vertical" make it vertical.

expand codeexpand code
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 {}

API#

nz-divider#

PropertyDescriptionTypeDefault
[nzDashed]whether line is dasdedbooleanfalse
[nzType]direction type of divider'horizontal' | 'vertical''horizontal'
[nzText]inner text of dividerstring | TemplateRef<void>-
[nzOrientation]inner text orientation'center' | 'left' | 'right''center'