Versions Compared

Version Old Version 1 New Version 2
Changes made by

Amish Ladhu

Amish Ladhu

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

References


Example

...

Usage

Structure

Code Block
<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>
        <div class="content-padding-med">
            Step Content Here
        </div>
        <div class="mat-stepper-navigation">
            <button mat-button matStepperNext class="matStepperNext">
                Next
            </button>
        </div>
    </mat-step>

    <!-- Step 2 -->

    <mat-step>
        <div class="content-padding-med">
            Step Content Here
        </div>
        <div class="mat-stepper-navigation">
            <button mat-button matStepperPrevious class="matStepperPrevious">
                Back
            </button>
            <button mat-button matStepperNext class="matStepperNext">
                Next
            </button>
        </div>
    </mat-step>

    <!-- Step 3 -->

    <mat-step>
        <div class="content-padding-med">
            Step Content Here
        </div>
        <div class="mat-stepper-navigation">
            <button mat-button matStepperPrevious class="matStepperPrevious">
                Back
            </button>
        </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.

Content

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

  • Navigation buttons must be added within each <mat-step> via a <div class="mat-stepper-navigation"> container.

    • The first step of every stepper should only contain the ‘Next’ button

    • The last step of every stepper should only contain the ‘Back’ button

    • All steps in between should contain both ‘Next’ and ‘Back’ buttons