Horizontal

Variant

Size

API

Divider

A divider line separates different content.

Import

Source

components/divider

Docs

Edit this page

When To Use#

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

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.

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.

Horizontal

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

      Loading...

Text Link

Link

Vertical

Use nzType="vertical" make it vertical.

      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.

Solid

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

Dotted

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

Dashed

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

Variant

Divider is of solid variant by default. You can change that to either dashed or dotted.

      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.

Orientation of title

Set orientation of divider to left or right.

      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.

Text without heading style

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

      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.

Size

Divider support nzSize to set the size of Divider.

      Loading...

API#

nz-dividercomponent#

Property	Description	Type	Default
`[nzDashed]`	whether line is dashed	`boolean`	`false`
`[nzType]`	direction type of divider	`'horizontal' \| 'vertical'`	`'horizontal'`
`[nzText]`	inner text of divider	`string \| TemplateRef<void>`	-
`[nzPlain]`	Divider text show as plain style	`boolean`	`false`
`[nzOrientation]`	inner text orientation	`'center' \| 'left' \| 'right'`	`'center'`
`[nzVariant]`	Whether line is dashed, dotted or solid	`'dashed' \| 'dotted' \| 'solid'`	`'solid'`
`[nzSize]`	Divider size	`'small' \| 'middle' \| 'large'`	-