Steps步骤条

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

何时使用

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

单独引入此组件

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

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

代码演示

Steps步骤条 - 图1

基本用法

简单的步骤条。

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

Steps步骤条 - 图2

迷你版

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

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

Steps步骤条 - 图3

起始序号

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

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

Steps步骤条 - 图4

带图标的步骤条

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

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

Steps步骤条 - 图5

步骤切换

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

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

Steps步骤条 - 图6

竖直方向的步骤条

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

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

Steps步骤条 - 图7

竖直方向的小型步骤条

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

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

Steps步骤条 - 图8

步骤运行错误

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

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

Steps步骤条 - 图9

点状步骤条

包含步骤点的进度条。

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

Steps步骤条 - 图10

自定义点状步骤条

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

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

Steps步骤条 - 图11

可点击

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

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

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

整体步骤条。

参数说明类型默认值
[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-stepsnzCurrent 来自动指定状态。可选:waitprocessfinisherror'wait' | 'process' | 'finish' | 'error''wait'
[nzTitle]标题string | TemplateRef<void>-