A library that implements to the Material Design Lite (MDL) a polyfill for stepper component specified by Material Design.
The types of steppers and steps are specified in Material Design page.
- Type of steps Editable steps, Non-editable steps, Mobile steps and Optional steps.
- Type of steppers Horizontal steppers, Vertical steppers, Linear steppers, Non-linear steppers, Alternative labels and Stepper feedback
Regarding the presented topics, here are the features supported by the MDL Stepper library:
Horizontal steppers are ideal when the contents of one step depend on an earlier step. On horizontal steppers, the step name and numbers appear on a horizontal bar.
By default, the horiztonal steppers width is defined as 840px. To change width dimension you only need to update the value
max-width. Also, you can custom the height size of horizontal steppers
Horizontal stepper is only available for large screens (e.g. desktop). In other words, the screen must have, at least, 840px.
Vertical steppers are designed for narrow screen sizes. They are ideal for mobile.
By default, the vertical steppers width is defined as 800px. To change width dimension you only need to update the value
Linear steppers require users to complete one step in order to move on to the next.
Non-linear steppers allow users to enter a multi-step flow at any point.
Steppers may display a transient feedback message after a step is saved. Stepper feedback should only be used if there is a long latency between steps.
Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session.
Optional steps within a linear flow should be marked as optional.
Steps marked as optional serve to define their behavior within the stepper and they will not show message "optional" by default. You need to set the title message manually. Even because this message may vary according to many languages.