Timeline时间轴

垂直展示的时间流信息。

何时使用

  • 当有一系列信息需按时间排列时，可正序和倒序。
  • 需要有一条时间轴进行视觉上的串联时。

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

代码演示

Timeline时间轴 - 图1

基本用法

基本的时间轴。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-timeline-basic',
  5.   template: `
  6.     <nz-timeline>
  7.       <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
  8.       <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
  9.       <nz-timeline-item>Technical testing 2015-09-01</nz-timeline-item>
  10.       <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item>
  11.     </nz-timeline>
  12.   `
  13. })
  14. export class NzDemoTimelineBasicComponent {}

Timeline时间轴 - 图2

最后一个及排序

当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 nzPending 为真值时展示幽灵节点，如果 nzPending 是 Template 可用于定制该节点内容，同时 nzPendingDot 将可以用于定制其轴点。nzReverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-timeline-pending',
  5.   template: `
  6.     <nz-timeline [nzPending]="'Recording...'" [nzReverse]="reverse">
  7.       <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
  8.       <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
  9.       <nz-timeline-item>Technical testing 2015-09-01</nz-timeline-item>
  10.     </nz-timeline>
  11.     <button nz-button style="margin-top: 16px" nzType="primary" (click)="toggleReverse()">Toggle Reverse</button>
  12.   `
  13. })
  14. export class NzDemoTimelinePendingComponent {
  15.   reverse = false;
  17.   toggleReverse(): void {
  18.     this.reverse = !this.reverse;
  19.   }
  20. }

Timeline时间轴 - 图3

自定义时间轴点

可以设置为图标或其他自定义元素。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-timeline-custom',
  5.   template: `
  6.     <nz-timeline>
  7.       <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
  8.       <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
  9.       <nz-timeline-item nzColor="red" [nzDot]="dotTemplate">Technical testing 2015-09-01</nz-timeline-item>
  10.       <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item>
  11.     </nz-timeline>
  12.     <ng-template #dotTemplate>
  13.       <i nz-icon nzType="clock-circle-o" style="font-size: 16px;"></i>
  14.     </ng-template>
  15.   `
  16. })
  17. export class NzDemoTimelineCustomComponent {}

Timeline时间轴 - 图4

圆圈颜色

圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态，灰色表示未完成或失效状态。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-timeline-color',
  5.   template: `
  6.     <nz-timeline>
  7.       <nz-timeline-item nzColor="green">Create a services site 2015-09-01</nz-timeline-item>
  8.       <nz-timeline-item nzColor="green">Solve initial network problems 2015-09-01</nz-timeline-item>
  9.       <nz-timeline-item nzColor="red">
  10.         <p>Solve initial network problems 1</p>
  11.         <p>Solve initial network problems 2</p>
  12.         <p>Solve initial network problems 3 2015-09-01</p>
  13.       </nz-timeline-item>
  14.       <nz-timeline-item>
  15.         <p>Technical testing 1</p>
  16.         <p>Technical testing 2</p>
  17.         <p>Technical testing 3 2015-09-01</p>
  18.       </nz-timeline-item>
  19.       <nz-timeline-item nzColor="gray">
  20.         <p>Technical testing 1</p>
  21.         <p>Technical testing 2</p>
  22.         <p>Technical testing 3 2015-09-01</p>
  23.       </nz-timeline-item>
  24.       <nz-timeline-item nzColor="gray">
  25.         <p>Technical testing 1</p>
  26.         <p>Technical testing 2</p>
  27.         <p>Technical testing 3 2015-09-01</p>
  28.       </nz-timeline-item>
  29.     </nz-timeline>
  30.   `
  31. })
  32. export class NzDemoTimelineColorComponent {}

Timeline时间轴 - 图5

交替展现

内容在时间轴两侧交替出现。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-timeline-alternate',
  5.   template: `
  6.     <nz-timeline nzMode="alternate">
  7.       <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
  8.       <nz-timeline-item nzColor="green">Solve initial network problems 2015-09-01</nz-timeline-item>
  9.       <nz-timeline-item [nzDot]="dotTemplate"
  10.         >Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
  11.         aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
  12.         explicabo.</nz-timeline-item
  13.       >
  14.       <nz-timeline-item nzColor="red">Network problems being solved 2015-09-01</nz-timeline-item>
  15.       <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
  16.       <nz-timeline-item [nzDot]="dotTemplate">Technical testing 2015-09-01</nz-timeline-item>
  17.     </nz-timeline>
  18.     <ng-template #dotTemplate>
  19.       <i nz-icon nzType="clock-circle-o" style="font-size: 16px;"></i>
  20.     </ng-template>
  21.   `
  22. })
  23. export class NzDemoTimelineAlternateComponent {}

Timeline时间轴 - 图6

右侧时间轴点

时间轴可以在内容的右边。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-timeline-right',
  5.   template: `
  6.     <nz-timeline nzMode="right">
  7.       <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
  8.       <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
  9.       <nz-timeline-item [nzDot]="dotTemplate" nzColor="red">Technical testing 2015-09-01</nz-timeline-item>
  10.       <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item>
  11.     </nz-timeline>
  12.     <ng-template #dotTemplate>
  13.       <i nz-icon nzType="clock-circle-o" style="font-size: 16px;"></i>
  14.     </ng-template>
  15.   `
  16. })
  17. export class NzDemoTimelineRightComponent {}

API

  1. <nz-timeline>
  2.   <nz-timeline-item>创建服务现场 2015-09-01</nz-timeline-item>
  3.   <nz-timeline-item>初步排除网络异常 2015-09-01</nz-timeline-item>
  4.   <nz-timeline-item>技术测试异常 2015-09-01</nz-timeline-item>
  5.   <nz-timeline-item>网络异常正在修复 2015-09-01</nz-timeline-item>
  6. </nz-timeline>

nz-timelinecomponent

时间轴。

参数说明类型默认值
[nzPending]指定最后一个幽灵节点是否存在或内容string | boolean | TemplateRef<void>false
[nzPendingDot]当最后一个幽灵节点存在時，指定其时间图点string | TemplateRef<void><i nz-icon nzType="loading"></i>
[nzReverse]节点排序booleanfalse
[nzMode]可以改变时间轴和内容的相对位置'left' | 'alternate' | 'right'-

nz-timeline-itemcomponent

时间轴的每一个节点。

参数说明类型默认值
[nzColor]指定圆圈颜色 'blue' | 'red' | 'green' | 'gray'，或自定义的色值 (CSS 颜色)stringblue
[nzDot]自定义时间轴点string | TemplateRef<void>-