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>
<div class="content-padding-med">
Step Content Here
</div><ng-template matStepLabel>Step 1 Title</ng-template>
<div class="matcontent-stepperpadding-navigationmed">
<buttonStep mat-buttonContent matStepperNext class="matStepperNext">
Next
</button>Here
</div>
</mat-step>
<!-- Step 2 -->
<mat-step>
<div class="content-padding-med">
Step Content Here
</div><ng-template matStepLabel>Step 2 Title</ng-template>
<div class="matcontent-stepperpadding-navigationmed">
<buttonStep mat-button matStepperPrevious class="matStepperPrevious">
Back
</button>
<button mat-button matStepperNext class="matStepperNext">
Next
</button>Content Here
</div>
</mat-step>
<!-- Step 3 -->
<mat-step>
<div class="content-padding-med">
Step Content Here
</div><ng-template matStepLabel>Step 3 Title</ng-template>
<div class="matcontent-stepperpadding-navigationmed">
<buttonStep mat-button matStepperPrevious class="matStepperPrevious">Content Here
Back
</button>
</div>
</mat-step>
</mat-horizontal-stepper> |
...
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
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
Use <ng-template matStepLabel> within each step to add each step title.
Step Buttons
Position
Navigation buttons ('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:
...