Timeline

Vertical display timeline.

When To Use#

When a series of information needs to be ordered by time (ascend or descend).
When you need a timeline to make a visual connection.

import { NzTimelineModule } from 'ng-zorro-antd/timeline';

Examples

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

Basic

Basic timeline.

      Loading...

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Recording...

Last node

When the timeline is incomplete and ongoing, put a ghost node at last. set [nzPending]="true" or [nzPending]="a TemplateRef". Used in ascend chronological order.

      Loading...

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

Custom

Set a node as an icon or other custom element.

      Loading...

⚽
Alice 20'
⚽
Susan 28'
⚽
Tim 45'
⚽
Bob 79'

Custom Position

You can assign different positions to timeline items.

      Loading...

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01

Color

Set the color of circles. green means completed or success status, red means warning or error, and blue means ongoing or other default status, gray for unfinished or disabled status.

      Loading...

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Network problems being solved 2015-09-01
Create a services site 2015-09-01
Technical testing 2015-09-01

Alternate

Alternate timeline.

      Loading...

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

Right alternate

Right alternate timeline.

      Loading...

LeftRightAlternative

2015-09-01
Create a services
2015-09-01 09:12:11
Solve initial network problems
Technical testing
2015-09-01 09:12:11
Network problems being solved

Label

Use nzLabel show time alone.

      Loading...

API#

<nz-timeline>
  <nz-timeline-item>step1 2015-09-01</nz-timeline-item>
  <nz-timeline-item>step2 2015-09-01</nz-timeline-item>
  <nz-timeline-item>step3 2015-09-01</nz-timeline-item>
  <nz-timeline-item>step4 2015-09-01</nz-timeline-item>
</nz-timeline>

nz-timelinecomponent#

Timeline

Property	Description	Type	Default
`[nzPending]`	Set the last ghost node's existence or its content	`string\|boolean\|TemplateRef<void>`	`false`
`[nzPendingDot]`	Set the dot of the last ghost node when pending is true	`string\|TemplateRef<void>`	`<span nz-icon nzType="loading"></span>`
`[nzReverse]`	Reverse nodes or not	`boolean`	`false`
`[nzMode]`	By sending `alternate` the timeline will distribute the nodes to the left and right	`'left' \| 'alternate' \| 'right' \| 'custom'`	-

nz-timeline-itemcomponent#

Node of timeline

Property	Description	Type	Default
`[nzColor]`	Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` or other custom colors	`string`	`blue`
`[nzDot]`	Customize timeline dot	`string \| TemplateRef<void>`	-
`[nzPosition]`	Customize position, only works when `nzMode` is `custom`	`'left' \| 'right'`	-
`[nzLabel]`	Set the label	`string \| TemplateRef<void>`	-