Steps步骤条

引导用户按照流程完成任务的导航条。

何时使用

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

  1. import { NzStepsModule } from 'ng-zorro-antd/steps';

代码演示

Steps步骤条 - 图1

基本用法

简单的步骤条。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-simple',
  5.   template: `
  6.     <nz-steps [nzCurrent]="1">
  7.       <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
  8.       <nz-step nzTitle="In Progress" nzSubtitle="Left 00:00:08" nzDescription="This is a description."> </nz-step>
  9.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  10.     </nz-steps>
  11.   `
  12. })
  13. export class NzDemoStepsSimpleComponent {}

Steps步骤条 - 图2

迷你版

迷你版的步骤条，通过设置 <nz-steps nzSize="small"> 启用.

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-small-size',
  5.   template: `
  6.     <nz-steps [nzCurrent]="current" nzSize="small">
  7.       <nz-step nzTitle="Finished"></nz-step>
  8.       <nz-step nzTitle="In Progress"></nz-step>
  9.       <nz-step nzTitle="Waiting"></nz-step>
  10.     </nz-steps>
  11.   `
  12. })
  13. export class NzDemoStepsSmallSizeComponent {
  14.   current = 1;
  15. }

Steps步骤条 - 图3

起始序号

通过 nzStartIndex 来设置步骤条的起始序号. 请注意 nzCurrent 也应该有对应的偏移.

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-start-index',
  5.   template: `
  6.     <nz-steps [nzCurrent]="current" [nzStartIndex]="3" nzSize="small">
  7.       <nz-step nzTitle="Finished"></nz-step>
  8.       <nz-step nzTitle="In Progress"></nz-step>
  9.       <nz-step nzTitle="Waiting"></nz-step>
  10.     </nz-steps>
  11.   `
  12. })
  13. export class NzDemoStepsStartIndexComponent {
  14.   current = 3;
  15. }

Steps步骤条 - 图4

带图标的步骤条

通过设置 nz-step 的 nzIcon 属性，可以启用自定义图标。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-icon',
  5.   template: `
  6.     <nz-steps>
  7.       <nz-step nzTitle="Login" nzStatus="finish" nzIcon="user"></nz-step>
  8.       <nz-step nzTitle="Verification" nzStatus="finish" nzIcon="solution"></nz-step>
  9.       <nz-step nzTitle="Pay" nzStatus="process" nzIcon="loading"></nz-step>
  10.       <nz-step nzTitle="Done" nzStatus="wait" [nzIcon]="iconTemplate"></nz-step>
  11.       <ng-template #iconTemplate><i nz-icon nzType="smile"></i></ng-template>
  12.     </nz-steps>
  13.   `
  14. })
  15. export class NzDemoStepsIconComponent {}

Steps步骤条 - 图5

步骤切换

通常配合内容及按钮使用，表示一个流程的处理进度。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-step-next',
  5.   template: `
  6.     <nz-steps [nzCurrent]="current">
  7.       <nz-step nzTitle="Finished"></nz-step>
  8.       <nz-step nzTitle="In Progress"></nz-step>
  9.       <nz-step nzTitle="Waiting"></nz-step>
  10.     </nz-steps>
  12.     <div class="steps-content">{{ index }}</div>
  13.     <div class="steps-action">
  14.       <button nz-button nzType="default" (click)="pre()" *ngIf="current > 0">
  15.         <span>Previous</span>
  16.       </button>
  17.       <button nz-button nzType="default" (click)="next()" *ngIf="current < 2">
  18.         <span>Next</span>
  19.       </button>
  20.       <button nz-button nzType="primary" (click)="done()" *ngIf="current === 2">
  21.         <span>Done</span>
  22.       </button>
  23.     </div>
  24.   `,
  25.   styles: [
  26.     `
  27.       .steps-content {
  28.         margin-top: 16px;
  29.         border: 1px dashed #e9e9e9;
  30.         border-radius: 6px;
  31.         background-color: #fafafa;
  32.         min-height: 200px;
  33.         text-align: center;
  34.         padding-top: 80px;
  35.       }
  37.       .steps-action {
  38.         margin-top: 24px;
  39.       }
  41.       button {
  42.         margin-right: 8px;
  43.       }
  44.     `
  45.   ]
  46. })
  47. export class NzDemoStepsStepNextComponent {
  48.   current = 0;
  50.   index = 'First-content';
  52.   pre(): void {
  53.     this.current -= 1;
  54.     this.changeContent();
  55.   }
  57.   next(): void {
  58.     this.current += 1;
  59.     this.changeContent();
  60.   }
  62.   done(): void {
  63.     console.log('done');
  64.   }
  66.   changeContent(): void {
  67.     switch (this.current) {
  68.       case 0: {
  69.         this.index = 'First-content';
  70.         break;
  71.       }
  72.       case 1: {
  73.         this.index = 'Second-content';
  74.         break;
  75.       }
  76.       case 2: {
  77.         this.index = 'third-content';
  78.         break;
  79.       }
  80.       default: {
  81.         this.index = 'error';
  82.       }
  83.     }
  84.   }
  86.   constructor() {}
  87. }

Steps步骤条 - 图6

竖直方向的步骤条

简单的竖直方向的步骤条。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-vertical',
  5.   template: `
  6.     <nz-steps [nzCurrent]="1" nzDirection="vertical">
  7.       <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
  8.       <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
  9.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  10.     </nz-steps>
  11.   `
  12. })
  13. export class NzDemoStepsVerticalComponent {}

Steps步骤条 - 图7

竖直方向的小型步骤条

简单的竖直方向的小型步骤条。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-vertical-small',
  5.   template: `
  6.     <nz-steps [nzCurrent]="1" nzDirection="vertical" nzSize="small">
  7.       <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
  8.       <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
  9.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  10.     </nz-steps>
  11.   `
  12. })
  13. export class NzDemoStepsVerticalSmallComponent {}

Steps步骤条 - 图8

步骤运行错误

使用 nz-steps 的 nzStatus 属性来指定当前步骤的状态。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-error',
  5.   template: `
  6.     <nz-steps [nzCurrent]="1" nzStatus="error">
  7.       <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
  8.       <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
  9.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  10.     </nz-steps>
  11.   `
  12. })
  13. export class NzDemoStepsErrorComponent {}

Steps步骤条 - 图9

点状步骤条

包含步骤点的进度条。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-progress-dot',
  5.   template: `
  6.     <nz-steps [nzCurrent]="1" nzProgressDot>
  7.       <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
  8.       <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
  9.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  10.     </nz-steps>
  11.     <nz-divider></nz-divider>
  12.     <nz-steps [nzCurrent]="1" nzProgressDot nzDirection="vertical">
  13.       <nz-step nzTitle="Finished" nzDescription="This is a description. This is a description."></nz-step>
  14.       <nz-step nzTitle="Finished" nzDescription="This is a description. This is a description."></nz-step>
  15.       <nz-step nzTitle="In Progress" nzDescription="This is a description. This is a description."></nz-step>
  16.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  17.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  18.     </nz-steps>
  19.   `
  20. })
  21. export class NzDemoStepsProgressDotComponent {}

Steps步骤条 - 图10

自定义点状步骤条

为点状步骤条增加自定义展示。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-customized-progress-dot',
  5.   template: `
  6.     <nz-steps [nzCurrent]="1" [nzProgressDot]="progressTemplate">
  7.       <nz-step nzTitle="Finished" nzDescription="You can hover on the dot."></nz-step>
  8.       <nz-step nzTitle="In Progress" nzDescription="You can hover on the dot."></nz-step>
  9.       <nz-step nzTitle="Waiting" nzDescription="You can hover on the dot."></nz-step>
  10.       <nz-step nzTitle="Waiting" nzDescription="You can hover on the dot."></nz-step>
  11.     </nz-steps>
  12.     <ng-template #progressTemplate let-dot let-status="status" let-index="index">
  13.       <span nz-popover nzContent="steps {{ index }} status: {{ status }}" style="margin-left: -100%;">
  14.         <ng-template [ngTemplateOutlet]="dot"></ng-template>
  15.       </span>
  16.     </ng-template>
  17.   `
  18. })
  19. export class NzDemoStepsCustomizedProgressDotComponent {}

Steps步骤条 - 图11

可点击

订阅 (nzIndexChange) 后，Steps 变为可点击状态。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-clickable',
  5.   template: `
  6.     <nz-steps [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
  7.       <nz-step nzTitle="Finished" [nzDisabled]="disable" nzDescription="This is a description."></nz-step>
  8.       <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
  9.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  10.     </nz-steps>
  11.     <nz-divider></nz-divider>
  12.     <nz-steps nzDirection="vertical" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
  13.       <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
  14.       <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
  15.       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
  16.     </nz-steps>
  17.   `
  18. })
  19. export class NzDemoStepsClickableComponent {
  20.   index = 0;
  21.   disable = false;
  22.   onIndexChange(index: number): void {
  23.     this.index = index;
  24.   }
  25. }

Steps步骤条 - 图12

导航步骤

导航类型的步骤条。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-steps-nav',
  5.   template: `
  6.     <nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
  7.       <nz-step nzTitle="Step 1" nzSubtitle="00:00:05" nzStatus="finish" nzDescription="This is a description."> </nz-step>
  8.       <nz-step nzTitle="Step 2" nzSubtitle="00:01:02" nzStatus="process" nzDescription="This is a description."> </nz-step>
  9.       <nz-step nzTitle="Step 3" nzSubtitle="waiting for long long time" nzStatus="wait" nzDescription="This is a description."> </nz-step>
  10.     </nz-steps>
  11.     <nz-steps nzType="navigation" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
  12.       <nz-step nzTitle="Step 1" nzStatus="finish"></nz-step>
  13.       <nz-step nzTitle="Step 2" nzStatus="process"></nz-step>
  14.       <nz-step nzTitle="Step 3" nzStatus="wait"></nz-step>
  15.       <nz-step nzTitle="Step 4" nzStatus="wait"></nz-step>
  16.     </nz-steps>
  17.     <nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
  18.       <nz-step nzTitle="finish 1" nzStatus="finish"></nz-step>
  19.       <nz-step nzTitle="finish 2" nzStatus="finish"></nz-step>
  20.       <nz-step nzTitle="current process" nzStatus="process"></nz-step>
  21.       <nz-step nzTitle="wait" nzStatus="wait" nzDisabled></nz-step>
  22.     </nz-steps>
  23.   `,
  24.   styles: [
  25.     `
  26.       nz-steps {
  27.         display: block;
  28.         margin-bottom: 60px;
  29.         box-shadow: rgb(232, 232, 232) 0px -1px 0px 0 inset;
  30.       }
  31.     `
  32.   ]
  33. })
  34. export class NzDemoStepsNavComponent {
  35.   index = 0;
  37.   onIndexChange(event: number): void {
  38.     this.index = event;
  39.   }
  40. }

API

  1. <nz-steps>
  2.   <nz-step nzTitle="第一步"></nz-step>
  3.   <nz-step nzTitle="第二步"></nz-step>
  4.   <nz-step nzTitle="第三步"></nz-step>
  5. </nz-steps>

nz-stepscomponent

整体步骤条。

参数说明类型默认值
[nzType]步骤条类型，有 default 和 navigation 两种‘default’ | ‘navigation’default
[nzCurrent]指定当前步骤，从 0 开始记数。在子 nz-step 元素中，可以通过 nzStatus 属性覆盖状态number0
[nzDirection]指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向‘vertical’ | ‘horizontal’horizontal
[nzLabelPlacement]指定标签放置位置，默认水平放图标右侧，可选 vertical 放图标下方‘vertical’ | ‘horizontal’horizontal
[nzProgressDot]点状步骤条，可以设置为一个 TemplateRefboolean | TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>false
[nzSize]指定大小，目前支持普通（default）和迷你（small）‘small’ | ‘default’‘default’
[nzStatus]指定当前步骤的状态，可选 waitprocessfinisherror‘wait’ | ‘process’ | ‘finish’ | ‘error’‘process’
[nzStartIndex]指定起始位置的序号number0
(nzIndexChange)点击单个步骤时触发的事件number-

nz-stepcomponent

步骤条内的每一个步骤。

参数说明类型默认值
[nzDescription]步骤的详情描述，可选string | TemplateRef<void>-
[nzIcon]步骤图标的类型，可选string | string[] | Set<string> | { [klass: string]: any; } | TemplateRef<void>-
[nzStatus]指定状态。当不配置该属性时，会使用 nz-steps 的 nzCurrent 来自动指定状态。可选：waitprocessfinisherror‘wait’ | ‘process’ | ‘finish’ | ‘error’‘wait’
[nzTitle]标题string | TemplateRef<void>-
[nzSubtitle]子标题string | TemplateRef<void>-
[nzDisabled]禁用点击booleanfalse