...
| 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’ buttonsOn the first step, the ‘Back’ button should be disabled.
On the last step, the ‘Next’ button should be disabled.
('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).
Action Button
The final action button should be disabled until the last step has been completed.
First Step Example:
...
Middle Steps Example:
...
Last Steps Example:
...