Stepper
The v-stepper
component displays progress through numbered steps.
Usage
A stepper can be used for a multitude of scenarios, including shopping carts, record creation and more.
API
Components.Steppers.
ダークテーマを適用します。
ライトテーマを適用します。
Components.Steppers.
Components.Steppers.
Components.Steppers.
Examples
Editable steps
An editable step can be selected by a user at any point and will navigate them to that step.
Non-editable steps
Non-editable steps force a user to process linearly through your process.
Optional steps
An optional step can be called out with sub-text.
Horizontal steps
Horizontal steppers move users along the x-axis through the defined steps.
Vertical steppers
Vertical steppers move users along the y-axis and otherwise work exactly the same as their horizontal counterpart.
Linear steppers
Linear steppers will always move a user through your defined path.
Non-linear steppers
Non-linear steppers allow the user to move through your process in whatever way they choose.
Alternate labels
Steppers also have an alternative label style which places the title under the step itself.
Multi-line error state
An error state can be displayed to notify the user of some action that must be taken.
Alternative label multi-line error state
The error state can also be applied to the alternative label style.
Vertical multi-line error state
The same state also applies to Vertical steppers.
Dynamic steps
Steppers can have their steps dynamically added or removed. If a currently active step is removed, be sure to account for this by changing the applied model.