Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. They’re usually useful when the user has to follow steps to complete a process, like in a wizard.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
If the QStep content also has images and you want to use swipe actions to navigate, you might want to add
draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.
- Please take notice of the Boolean
keep-aliveprop for QStepper, if you need this behavior. Do NOT use Vue’s native
<keep-alive>component over QStep.
- Should you need the
keep-alive-excludeprops then the QStep
names must be valid Vue component names (no spaces allowed, don’t start with a number etc).
You can also connect
contracted prop to
$q.screen to create a responsive behavior, like
More info: Quasar Screen Plugin.
Play with coloring using the
*-color props (on QStepper or override on specific QStep).
You can also use
prefix prop (max 2 characters) instead of an icon for each step’s header. This will be displayed if the step is not currently being edited and it isn’t marked with error or as “done”.
Starting with Quasar v1.9.13+, you can use the
header-class prop to apply any CSS class(es) to the header. In the example below, we are applying bolded text:
This component allows you to place buttons within
navigate through the steps. It is up to you to add whatever buttons you require.
To use global navigation, you must add it to the
QStepper ‘navigation’ slot.