Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation and have two main types: Horizontal or Vertical. The horizontal type can have an alternative layout.
Individual steps are editable and optional by default, but you can change that.
Horizontal steppers are ideal when the contents of one step depend on an earlier step. You should avoid using long step names in horizontal steppers.
This is the default type of steppers. They are not recommended for mobile:
They can also have a alternative layout to give greater emphasis to the steps titles:
Vertical steppers are great deal for mobile devices or to be inserted on small areas of your application, like a dialog or a card.
By default steps are optional and this means that you can advance to the last step without pass through the other ones. But sometimes we're guiding an user through a linear flow and all steps matter or are connected together. Linear steppers require users to complete one step in order to move on to the next:
By default steps are also editable. But you can disable this by manually setting on each step that could be non-editable. This makes sense when users cannot edit a step later or when step editing poses a distraction risk to form completion:
Vue Material Steppers have a deep integratio with Vue Router. This means that you can have a route per step. This allows you to navigate between steps through the browser history, store the current stepper after a refresh and lots of great scenarios that you can explore! Take a look at the page URL changing when clicking on each steps:
The following options can be applied to any steppers:
|md-active-step String||The id of the step to be set as the current one. Useful to programatically change the active step.. Should be used with the |
|md-sync-route Boolean||Watches the current route if there is a Vue Router instance running on the page. This will automatically change the active stepper based on the current URL.|
|md-alternative Boolean||Change the steppers into a alternative layout|
|md-vertical Boolean||Change the steppers into a vertical orientation. For mobile.|
|md-linear Boolean||Set steppers to work in a linear flow.|
|md-dynamic-height Boolean||Calculate the stepper height automatically and add an awesome height transition between them.|
The following options can be used on any step. All options of
router-link can be simply used here:
|id String||The step id. Used when changing the active step dynamically|
|href String||The step href link. Useful when you don't have Vue Router on your app, but you still want to sync the active step with the current URL.|
|md-label String||The step label|
|md-description String||The step description. When a step is optional, use this prop to tell the user that.|
|md-error String||The error message. When set, the stepper will automatically raise an error. To clear the error, set this variable as null.|
|md-done Boolean||Set this prop to true to tell that a particular step is finished.|
|md-editable Boolean||Make a step editable or non editable.|