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 { 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
      Loading...
    
Text LinkLink

Use nzType="vertical" make it vertical.

expand codeexpand code
      Loading...
    

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.

Set orientation of divider to left or right.

expand codeexpand code
      Loading...
    

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.

You can use non-heading style of divider text by setting nzPlain.

expand codeexpand code
      Loading...
    

API#

nz-divider#

PropertyDescriptionTypeDefault
[nzDashed]whether line is dashedbooleanfalse
[nzType]direction type of divider'horizontal' | 'vertical''horizontal'
[nzText]inner text of dividerstring | TemplateRef<void>-
[nzPlain]Divider text show as plain stylebooleanfalse
[nzOrientation]inner text orientation'center' | 'left' | 'right''center'