References
Material DocumentationDashboard Live
ExampleExample
...
...
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>
<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
<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 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
Step Titles
Use
<ng-template matStepLabel>within each step to add each step title.('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.
First Step Example:
...
Middle Steps Example:
...
Last Steps Example:
...