Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 6 Next »

References


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>
        <div class="mat-stepper-navigation">
            <button mat-button matStepperNext class="matStepperNext">
                Next
            </button>
        </div>
    </mat-step>

    <!-- Step 2 -->

    <mat-step>
        <ng-template matStepLabel>Step 2 Title</ng-template>
        <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>
        <ng-template matStepLabel>Step 3 Title</ng-template>
        <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.

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

  • 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

  • No labels