Steppers - Vue Material

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

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:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.

They can also have a alternative layout to give greater emphasis to the steps titles:

Vertical Steppers

Vertical steppers are great deal for mobile devices or to be inserted on small areas of your application, like a dialog or a card.

Linear Steppers

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:

Non Editable Steps

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 Router Integration

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:

Try to refresh the page to see that Steppers will detect the active step based on the current URL. Just awesome!

API - md-steppers

The following options can be applied to any steppers:

Name	Description	Default
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 `.sync` modifier.	`false`
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.	`false`
md-alternative Boolean	Change the steppers into a alternative layout	`false`
md-vertical Boolean	Change the steppers into a vertical orientation. For mobile.	`false`
md-linear Boolean	Set steppers to work in a linear flow.	`false`
md-dynamic-height Boolean	Calculate the stepper height automatically and add an awesome height transition between them.	`false`

API - md-step

The following options can be used on any step. All options of router-link can be simply used here:

Name	Description	Default
id String	The step id. Used when changing the active step dynamically	`a random string`
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.	`null`
md-label String	The step label	`null`
md-description String	The step description. When a step is optional, use this prop to tell the user that.	`null`
md-error String	The error message. When set, the stepper will automatically raise an error. To clear the error, set this variable as null.	`null`
md-done Boolean	Set this prop to true to tell that a particular step is finished.	`false`
md-editable Boolean	Make a step editable or non editable.	`true`