Touch/Mouse Actions

Utils

Web API Wrappers

Quasar Stepper

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

The stepper component is built from three different child components:

QStepper - main Stepper encapsulating component

QStep - individual steps

QStepperNavigation - helper for encapsulating Stepper navigation buttons (within QStep or globally for the stepper as direct child of QStepper)

Installation

Edit /quasar.conf.js:

framework: { components: ['QStepper','QStep','QStepperNavigation' ]}

Basic Usage

Here’s a small example showcasing a very basic Stepper to understand how components fit together.

<q-stepperref="stepper"><!-- Step: --><q-stepdefaulttitle="First Step"subtitle="Here we go"> ...Step content, components, ...</q-step><!-- Step: --><q-steptitle="Step 2">...</q-step><!-- Step: --><q-steptitle="Step 3"subtitle="Review and submit">...</q-step><!-- Optional. "Globally" available Stepper navigation which means that it will be visible regardless of the current step. If we'd put QStepperNavigation under a QStep then we'd be using it for that step only. --><q-stepper-navigation><q-btnflat @click="$refs.stepper.previous()"label="Back" /><q-btn @click="$refs.stepper.next()"label="Next" /></q-stepper-navigation></q-stepper>

A more involved example. This one doesn’t uses QStepperNavigation as direct child of QStepper because each step has navigation configured. Notice the additional attributes on each component below. They will be detailed in next sections.

Used to change the display of the Step icon, when the step is finished. Default is the “check” icon.

active-icon

String, Boolean

Used to change the icon, when a Step is selected. Default is the “edit” icon.

error-icon

String / Boolean

Used to change the icon, when there is an error in a Step. Default is the “warning” icon.

You can also control the current step by using v-model on QStep. More details in next section.

Vue Method

Description

goToStep(String)

Moves the user to the given Step, defined by Step’s “name” property.

next()

Stepper goes to the next step.

previous()

Stepper goes to the previous step.

reset()

Returns the stepper back to the first step.

Component events:

Vue Event

Description

@step

Emitted when navigating to another step.

Using v-model

Each QStep has a name prop (which is optional). Use this prop along with v-model to control the current step.

The example below shows how you can use v-model alone to control navigation. Notice the @click events. If you dynamically insert/remove Steps it’s better to use a Vue reference on QStepper and call next() or previous() methods since these methods are not binded to specific Step names.

When using a vertical Stepper, it doesn’t really make sense to use a “global” QStepper navigation. Instead, use navigation within each QStep.

Displaying Progress

A common case is where you need to take an asynchronouse action (like an Ajax call) before going to next step. Make use of QInnerLoading component for this:

<q-stepper><!-- Steps... --> ........<!-- Create a Boolean scope variable (here it's "inProgress") and binded to "visible" prop. Then toggle it whenever you need to display that the Stepper has a background process going. --><q-inner-loading:visible="inProgress" /></q-stepper>

Specific Steps Order

If you dynamically add/remove Steps, then you need to specify the order property (for ALL QSteps) so that the Stepper will know the actual order of Steps. By using v-if or v-for directives, Vue & Quasar can’t ensure Steps will be registered in the order they are placed in DOM.

IMPORTANTJust make sure that when you use order you apply it to all QSteps and don’t leave out any step without it. Either use order for all QSteps or don’t use it at all.

<q-stepper><!-- Will come as second step --><q-step:order="2">..</q-step><!-- Will come as first step --><q-step:order="1">..</q-step><!-- Will come as third step --><q-step:order="3">..</q-step></q-stepper>

The order property applied to all QStep doesn’t has to be strictly growing consecutively. Setting order as 10, 100 and 52 will work too.