Stepper

A Stepper conveys progress through numbered steps. Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. It’s usually useful when the user has to follow steps to complete a process, like in a wizard.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QStepper',
      'QStep',
      'QStepperNavigation'
    ]
  }
}

Usage

WARNING

Please take notice of the Boolean keep-alive prop for QStepper, if you need this behavior. Do NOT use Vue’s native <keep-alive> component over QStep.

Horizontal



Vertical



Header navigation

Non-linear header navigation



Linear header navigation



Header options

Signaling step error



Alternative labels



TIP

You can also connect contracted prop to $q.screen to make a responsive behavior, like :contracted="$q.screen.lt.md. More info: Quasar Screen Plugin.

Contracted



Style

Play with coloring using the *-icon and *-color props (on QStepper or override on specific QStep).

Coloring



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

Step prefix



Dark



Message slot

Message slot with fixed height steps



QStepper API

QStep API

QStepperNavigation API

This component allows you to place buttons within QStepper or QStep to navigate through the steps. It is up to you to add whatever buttons you require.

TIP

To use global navigation, you must add it to the QStepper ‘navigation’ slot.