Steps步骤条

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

何时使用#

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

单独引入此组件#

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

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

代码演示

Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.

简单的步骤条。

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

@Component({
  selector: 'nz-demo-steps-simple',
  template: `
    <nz-steps [nzCurrent]="1">
      <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzSubtitle="Left 00:00:08" nzDescription="This is a description."> </nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsSimpleComponent {}
4
Finished
5
In Progress
6
Waiting

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

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

@Component({
  selector: 'nz-demo-steps-start-index',
  template: `
    <nz-steps [nzCurrent]="current" [nzStartIndex]="3" nzSize="small">
      <nz-step nzTitle="Finished"></nz-step>
      <nz-step nzTitle="In Progress"></nz-step>
      <nz-step nzTitle="Waiting"></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsStartIndexComponent {
  current = 3;
}
Finished
2
In Progress
3
Waiting

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

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

@Component({
  selector: 'nz-demo-steps-small-size',
  template: `
    <nz-steps [nzCurrent]="current" nzSize="small">
      <nz-step nzTitle="Finished"></nz-step>
      <nz-step nzTitle="In Progress"></nz-step>
      <nz-step nzTitle="Waiting"></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsSmallSizeComponent {
  current = 1;
}
Login
Verification
Pay
Done

通过设置 nz-stepnzIcon 属性,可以启用自定义图标。

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

@Component({
  selector: 'nz-demo-steps-icon',
  template: `
    <nz-steps>
      <nz-step nzTitle="Login" nzStatus="finish" nzIcon="user"></nz-step>
      <nz-step nzTitle="Verification" nzStatus="finish" nzIcon="solution"></nz-step>
      <nz-step nzTitle="Pay" nzStatus="process" nzIcon="loading"></nz-step>
      <nz-step nzTitle="Done" nzStatus="wait" [nzIcon]="iconTemplate"></nz-step>
      <ng-template #iconTemplate><i nz-icon nzType="smile"></i></ng-template>
    </nz-steps>
  `
})
export class NzDemoStepsIconComponent {}
1
Finished
2
In Progress
3
Waiting
First-content

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

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

@Component({
  selector: 'nz-demo-steps-step-next',
  template: `
    <nz-steps [nzCurrent]="current">
      <nz-step nzTitle="Finished"></nz-step>
      <nz-step nzTitle="In Progress"></nz-step>
      <nz-step nzTitle="Waiting"></nz-step>
    </nz-steps>

    <div class="steps-content">{{ index }}</div>
    <div class="steps-action">
      <button nz-button nzType="default" (click)="pre()" *ngIf="current > 0">
        <span>Previous</span>
      </button>
      <button nz-button nzType="default" (click)="next()" *ngIf="current < 2">
        <span>Next</span>
      </button>
      <button nz-button nzType="primary" (click)="done()" *ngIf="current === 2">
        <span>Done</span>
      </button>
    </div>
  `,
  styles: [
    `
      .steps-content {
        margin-top: 16px;
        border: 1px dashed #e9e9e9;
        border-radius: 6px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
      }

      .steps-action {
        margin-top: 24px;
      }

      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoStepsStepNextComponent {
  current = 0;

  index = 'First-content';

  pre(): void {
    this.current -= 1;
    this.changeContent();
  }

  next(): void {
    this.current += 1;
    this.changeContent();
  }

  done(): void {
    console.log('done');
  }

  changeContent(): void {
    switch (this.current) {
      case 0: {
        this.index = 'First-content';
        break;
      }
      case 1: {
        this.index = 'Second-content';
        break;
      }
      case 2: {
        this.index = 'third-content';
        break;
      }
      default: {
        this.index = 'error';
      }
    }
  }

  constructor() {}
}
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

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

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

@Component({
  selector: 'nz-demo-steps-vertical',
  template: `
    <nz-steps [nzCurrent]="1" nzDirection="vertical">
      <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsVerticalComponent {}
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

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

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

@Component({
  selector: 'nz-demo-steps-vertical-small',
  template: `
    <nz-steps [nzCurrent]="1" nzDirection="vertical" nzSize="small">
      <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsVerticalSmallComponent {}
Finished
This is a description.
In Progress
This is a description.
3
Waiting
This is a description.

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

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

@Component({
  selector: 'nz-demo-steps-error',
  template: `
    <nz-steps [nzCurrent]="1" nzStatus="error">
      <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsErrorComponent {}
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Finished
This is a description. This is a description.
Finished
This is a description. This is a description.
In Progress
This is a description. This is a description.
Waiting
This is a description.
Waiting
This is a description.

包含步骤点的进度条。

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

@Component({
  selector: 'nz-demo-steps-progress-dot',
  template: `
    <nz-steps [nzCurrent]="1" nzProgressDot>
      <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
    <nz-divider></nz-divider>
    <nz-steps [nzCurrent]="1" nzProgressDot nzDirection="vertical">
      <nz-step nzTitle="Finished" nzDescription="This is a description. This is a description."></nz-step>
      <nz-step nzTitle="Finished" nzDescription="This is a description. This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="This is a description. This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsProgressDotComponent {}
Finished
You can hover on the dot.
In Progress
You can hover on the dot.
Waiting
You can hover on the dot.
Waiting
You can hover on the dot.

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

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

@Component({
  selector: 'nz-demo-steps-customized-progress-dot',
  template: `
    <nz-steps [nzCurrent]="1" [nzProgressDot]="progressTemplate">
      <nz-step nzTitle="Finished" nzDescription="You can hover on the dot."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="You can hover on the dot."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="You can hover on the dot."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="You can hover on the dot."></nz-step>
    </nz-steps>
    <ng-template #progressTemplate let-dot let-status="status" let-index="index">
      <span nz-popover nzContent="steps {{ index }} status: {{ status }}" style="margin-left: -100%;">
        <ng-template [ngTemplateOutlet]="dot"></ng-template>
      </span>
    </ng-template>
  `
})
export class NzDemoStepsCustomizedProgressDotComponent {}
1
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
1
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

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

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

@Component({
  selector: 'nz-demo-steps-clickable',
  template: `
    <nz-steps [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
      <nz-step nzTitle="Finished" [nzDisabled]="disable" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
    <nz-divider></nz-divider>
    <nz-steps nzDirection="vertical" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
      <nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
    </nz-steps>
  `
})
export class NzDemoStepsClickableComponent {
  index = 0;
  disable = false;
  onIndexChange(index: number): void {
    this.index = index;
  }
}
Step 1
00:00:05
This is a description.
2
Step 2
00:01:02
This is a description.
3
Step 3
waiting for long long time
This is a description.
Step 1
2
Step 2
3
Step 3
4
Step 4
finish 1
finish 2
3
current process
4
wait

导航类型的步骤条。

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

@Component({
  selector: 'nz-demo-steps-nav',
  template: `
    <nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
      <nz-step nzTitle="Step 1" nzSubtitle="00:00:05" nzStatus="finish" nzDescription="This is a description.">
      </nz-step>
      <nz-step nzTitle="Step 2" nzSubtitle="00:01:02" nzStatus="process" nzDescription="This is a description.">
      </nz-step>
      <nz-step
        nzTitle="Step 3"
        nzSubtitle="waiting for long long time"
        nzStatus="wait"
        nzDescription="This is a description."
      >
      </nz-step>
    </nz-steps>
    <nz-steps nzType="navigation" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
      <nz-step nzTitle="Step 1" nzStatus="finish"></nz-step>
      <nz-step nzTitle="Step 2" nzStatus="process"></nz-step>
      <nz-step nzTitle="Step 3" nzStatus="wait"></nz-step>
      <nz-step nzTitle="Step 4" nzStatus="wait"></nz-step>
    </nz-steps>
    <nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
      <nz-step nzTitle="finish 1" nzStatus="finish"></nz-step>
      <nz-step nzTitle="finish 2" nzStatus="finish"></nz-step>
      <nz-step nzTitle="current process" nzStatus="process"></nz-step>
      <nz-step nzTitle="wait" nzStatus="wait" nzDisabled></nz-step>
    </nz-steps>
  `,
  styles: [
    `
      nz-steps {
        display: block;
        margin-bottom: 60px;
        box-shadow: rgb(232, 232, 232) 0px -1px 0px 0 inset;
      }
    `
  ]
})
export class NzDemoStepsNavComponent {
  index = 0;

  onIndexChange(event: number): void {
    this.index = event;
  }
}

API#

<nz-steps>
  <nz-step nzTitle="第一步"></nz-step>
  <nz-step nzTitle="第二步"></nz-step>
  <nz-step nzTitle="第三步"></nz-step>
</nz-steps>

nz-steps#

整体步骤条。

参数说明类型默认值
[nzType]步骤条类型,有 defaultnavigation 两种'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-step#

步骤条内的每一个步骤。

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