Stepper

References

Material Documentation

Example

Usage

Structure

<mat-horizontal-stepper>

    <ng-template matStepperIcon="edit">
        <span class="cvtr-icons tick step-status-done"></span>
    </ng-template>

    <ng-template matStepperIcon="done">
        <span class="cvtr-icons tick"></span>
    </ng-template>

    <!-- Step 1 -->

    <mat-step>
        <ng-template matStepLabel>Step 1 Title</ng-template>
        <div class="content-padding-med">
            Step Content Here
        </div>
    </mat-step>

    <!-- Step 2 -->

    <mat-step>
        <ng-template matStepLabel>Step 2 Title</ng-template>
        <div class="content-padding-med">
            Step Content Here
        </div>
    </mat-step>

    <!-- Step 3 -->

    <mat-step>
        <ng-template matStepLabel>Step 3 Title</ng-template>
        <div class="content-padding-med">
            Step Content Here
        </div>
    </mat-step>

</mat-horizontal-stepper>

Container

Every ‘stepper’ should have a mat-horizontal-stepper container, which formats its' content styles.

Stepper Icons

Add <ng-template matStepperIcon="edit"> and <ng-template matStepperIcon="done"> with their contents to include the step status changes to step icons.

Stepper Content

Use <mat-step> for each step within each stepper.

Step Titles

Use <ng-template matStepLabel> within each step to add each step title.

Step Buttons

Position

Navigation buttons ('Next' button, ‘Back’ button) should be placed on the modal/panel footer to the left of the final action button (e.g. ‘Save’ button, ‘Import’ button).
On the first step, the ‘Back’ button should be disabled.
On the last step, the ‘Next’ button should be disabled.

Action Button

The final action button should be disabled until the last step has been completed.

Product Design

Stepper

Analytics

First Step Example:

Middle Steps Example:

Last Steps Example: