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 this Component Individually#

You can get more detail here.

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 timeline.

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

@Component({
  selector: 'nz-demo-timeline-basic',
  template: `
    <nz-timeline>
      <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Technical testing 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item>
    </nz-timeline>
  `
})
export class NzDemoTimelineBasicComponent {}
  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Technical testing 2015-09-01
  • Recording...

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.

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

@Component({
  selector: 'nz-demo-timeline-pending',
  template: `
    <nz-timeline [nzPending]="'Recording...'" [nzReverse]="reverse">
      <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Technical testing 2015-09-01</nz-timeline-item>
    </nz-timeline>
    <button nz-button style="margin-top: 16px" nzType="primary" (click)="toggleReverse()">Toggle Reverse</button>
  `
})
export class NzDemoTimelinePendingComponent {
  reverse = false;

  toggleReverse(): void {
    this.reverse = !this.reverse;
  }
}
  • 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

Set a node as an icon or other custom element.

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

@Component({
  selector: 'nz-demo-timeline-custom',
  template: `
    <nz-timeline>
      <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
      <nz-timeline-item nzColor="red" [nzDot]="dotTemplate">Technical testing 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item>
    </nz-timeline>
    <ng-template #dotTemplate>
      <i nz-icon nzType="clock-circle-o" style="font-size: 16px;"></i>
    </ng-template>
  `
})
export class NzDemoTimelineCustomComponent {}
  • 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

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.

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

@Component({
  selector: 'nz-demo-timeline-color',
  template: `
    <nz-timeline>
      <nz-timeline-item nzColor="green">Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item nzColor="green">Solve initial network problems 2015-09-01</nz-timeline-item>
      <nz-timeline-item nzColor="red">
        <p>Solve initial network problems 1</p>
        <p>Solve initial network problems 2</p>
        <p>Solve initial network problems 3 2015-09-01</p>
      </nz-timeline-item>
      <nz-timeline-item>
        <p>Technical testing 1</p>
        <p>Technical testing 2</p>
        <p>Technical testing 3 2015-09-01</p>
      </nz-timeline-item>
      <nz-timeline-item nzColor="gray">
        <p>Technical testing 1</p>
        <p>Technical testing 2</p>
        <p>Technical testing 3 2015-09-01</p>
      </nz-timeline-item>
      <nz-timeline-item nzColor="gray">
        <p>Technical testing 1</p>
        <p>Technical testing 2</p>
        <p>Technical testing 3 2015-09-01</p>
      </nz-timeline-item>
    </nz-timeline>
  `
})
export class NzDemoTimelineColorComponent {}
  • 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 timeline.

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

@Component({
  selector: 'nz-demo-timeline-alternate',
  template: `
    <nz-timeline nzMode="alternate">
      <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item nzColor="green">Solve initial network problems 2015-09-01</nz-timeline-item>
      <nz-timeline-item [nzDot]="dotTemplate"
        >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.</nz-timeline-item
      >
      <nz-timeline-item nzColor="red">Network problems being solved 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item [nzDot]="dotTemplate">Technical testing 2015-09-01</nz-timeline-item>
    </nz-timeline>
    <ng-template #dotTemplate>
      <i nz-icon nzType="clock-circle-o" style="font-size: 16px;"></i>
    </ng-template>
  `
})
export class NzDemoTimelineAlternateComponent {}
  • 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 timeline.

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

@Component({
  selector: 'nz-demo-timeline-right',
  template: `
    <nz-timeline nzMode="right">
      <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
      <nz-timeline-item [nzDot]="dotTemplate" nzColor="red">Technical testing 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item>
    </nz-timeline>
    <ng-template #dotTemplate>
      <i nz-icon nzType="clock-circle-o" style="font-size: 16px;"></i>
    </ng-template>
  `
})
export class NzDemoTimelineRightComponent {}

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-timeline#

Timeline

PropertyDescriptionTypeDefault
[nzPending]Set the last ghost node's existence or its contentstring|boolean|TemplateRef<void>false
[nzPendingDot]Set the dot of the last ghost node when pending is truestring|TemplateRef<void><i nz-icon nzType="loading"></i>
[nzReverse]Reverse nodes or notbooleanfalse
[nzMode]By sending alternate the timeline will distribute the nodes to the left and right'left' | 'alternate' | 'right'-

nz-timeline-item#

Node of timeline

PropertyDescriptionTypeDefault
[nzColor]Set the circle's color to 'blue' | 'red' | 'green' | 'gray' or other custom colors (css color)stringblue
[nzDot]Customize timeline dotstring | TemplateRef<void>-