...
| 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>
<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> |
...
Use
<ng-template matStepLabel>within each step to add each step title.
Step Buttons
Position
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
should be placed on the modal or panel footer to the left of the final action button (e.g. ‘Save’ button, ‘Import’ button).
Action Button
The final action button should be disabled until the last step has been completed.