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:

Default layout

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

Alternative Layout

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.

Ideal for Mobile

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:

With error handler

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:

Disable Edit

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!
Sync with route

API - md-steppers

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 .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:

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