Steps

Steps is a navigation bar that guides users through the steps of a task.

When To Use#

When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

Examples

1
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

The most basic step bar.

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

@Component({
  selector: 'nz-demo-steps-simple',
  template: `
    <nz-steps>
      <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 NzDemoStepsSimpleComponent {}
Finished
2
In Progress
3
Waiting

By setting like this: <nz-steps nzSize="small">, you can get a mini version.

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;
}
4
Finished
5
In Progress
6
Waiting

By setting nzStartIndex to change starting index of a step component. Be sure to add an offset to nzCurrent as well.

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;
}
Login
Verification
Pay
Done

You can use your own custom icons by setting the property nzIcon for nz-step. Old API is still compatible but we strongly suggest the new API.

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 type="smile"></i></ng-template>
    </nz-steps>
  `
})
export class NzDemoStepsIconComponent {}
1
Finished
2
In Progress
3
Waiting
First-content

Cooperate with the content and buttons, to represent the progress of a process.

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.

A simple step bar in the vertical direction.

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.

A simple mini version step bar in the vertical direction.

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.

By using nzStatus of nz-steps, you can specify the state for current step.

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.

Steps with progress dot style.

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>
  `
})
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.

You can customize the display for Steps with progress dot style.

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">
      <nz-popover nzContent="steps {{ index }} status: {{ status }}">
        <span nz-popover style="margin-left: -100%;">
          <ng-template [ngTemplateOutlet]="dot"></ng-template>
        </span>
      </nz-popover>
    </ng-template>
  `
})
export class NzDemoStepsCustomizedProgressDotComponent {}

API#

<nz-steps>
  <nz-step nzTitle="first step"></nz-step>
  <nz-step nzTitle="second step"></nz-step>
  <nz-step nzTitle="third step"></nz-step>
</nz-steps>

Import this Component Individually#

You can get more detail here.

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

nz-steps#

The whole of the step bar.

PropertyDescriptionTypeDefault
[nzCurrent]To set the current step, counting from 0. You can overwrite this state by using nzStatus of nz-stepnumber0
[nzDirection]To specify the direction of the step bar, horizontal and vertical are currently supported'vertical'|'horizontal'horizontal
[nzLabelPlacement]Support vertical title and description'vertical'|'horizontal'horizontal
[nzProgressDot]Steps with progress dot style, customize the progress dot by setting it with TemplateRefboolean|TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>false
[nzSize]To specify the size of the step bar, default and small are currently supported'small'|'default''default'
[nzStatus]To specify the status of current step, can be set to one of the following values: waitprocessfinisherror'wait'|'process'|'finish'|'error''process'
[nzStartIndex]To specify the starting numbernumber0

nz-step#

A single step in the step bar.

PropertyDescriptionTypeDefault
[nzDescription]description of the step, optional propertystring|TemplateRef<void>-
[nzIcon]icon of the step, optional propertystring|string[]|Set<string>|{ [klass: string]: any; }TemplateRef<void>-
[nzStatus]to specify the status. It will be automatically set by nzCurrent of nz-steps if not configured. Optional values are: waitprocessfinisherror'wait'|'process'|'finish'|'error''wait'
[nzTitle]title of the stepstring|TemplateRef<void>-