We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

Stepper
#

Stepper allows users to separate content into several steps and navigate through it using buttons or timeline.

Examples
#

Basic usage
#

  1. 1
    Choose your product
  2. 2
    Checkout
  3. 3
    Review order
  4. 4
    Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Vertical
#

  1. 1
    Choose your product
  2. 2
    Checkout
  3. 3
    Review order
  4. 4
    Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Custom icons
#

Each step config could have icon name specified, check va-icon for more details.

  1. Choose your product
  2. Checkout
  3. Review order
  4. Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Customized with slots
#

    Choose your product
    Checkout
    Review order
    Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Navigation only
#

You can hide controls and use stepper navigation independently

  1. 1
    Choose your product
  2. 2
    Checkout
  3. 3
    Review order
  4. 4
    Confirm and pay
Open in GitHub

Custom save action for each step
#

This adds a property of beforeLeave that accepts a function. When you click next previous or click on a navigation item at the top, your function will be called. If beforeLeave returns false navigation is disabled. You can also set hasError using this function.

  1. 1
    One
  2. 2
    Two
  3. 3
    Three

Validate on save

Open in GitHub

Linear
#

Prevent navigation to the step if any of previous steps have error. It means that you can't go to the next step until you fix the error. You can set hasError in beforeLeave function.

  1. 1
    One
  2. 2
    Two
  3. 3
    Three
  4. 4
    Four
Open in GitHub

Accessibility
#

The component itself has a role="group" with aria attributes like an aria-orientation attribute that depends on the vertical property. The current step element has the attribute aria-current="step". Keyboard navigation for this component is based on the w3 tabs pattern.

API
#

Props #

NameDescriptionTypesDefault
ariaLabel

The aria-label of the component

String

"$t:progress"

color

Color of the component (theme string or HEX string).

String

"primary"

controlsHidden

Removes 'Back' and 'Next' buttons.

Boolean

false

finishButtonHidden

Hides 'Finish' button

Boolean

false

linear

Requires that each step must be manually marked as complete

Boolean

false

modelValue

Value of current step starting from 0.

Number

0

navigationDisabled

Disables navigation via pressing on steps.

Boolean

false

nextDisabled

Disables navigation to steps further than model-value.

Boolean

false

nextDisabledOnError

Boolean

false

stateful

Add possibility to work with component without setting v-model.

Boolean

false

steps

Array of step configs. Label is text displayed under each step in timeline, Icon if set, replaces step icon with specified icon, disabled makes step inaccessible without removing it from the timeline.

{ label: string, icon?: string, disabled?: boolean, save?: Function, hasError?: boolean, completed?: boolean }

[]

vertical

Changes stepper orientation to vertical.

Boolean

false

Events #

NameDescription

finish

Emits when 'Finish' button is getting pressed

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

update:steps

Slots #

NameDescription

controls

Inserts provided template after default controls. If you want to replace default controls set controls-hidden prop to true. Slot scope properties and methods available: {'{ setStep, nextStep, prevStep }'}.

divider

Replaces step divider in the timeline with provided template.

stepButton

Replaces the step in timeline with provided template. Step slots are enumerable and should be used with step number postfix (i.e. step-button-0, step-button-1, etc). Slot scope properties and methods available: {'{ setStep, nextStep, prevStep, step, isActive, isCompleted }'}.

stepContent

Replaces step content with provided template. Content slots are enumerable and should be used with step number postfix (i.e. step-content-0, step-content-1, etc). Slot scope properties and methods available: {'{ setStep, nextStep, prevStep }'}.

Methods #

NameDescription

nextStep

By default activates next step. If target step is disabled activates the step after it.

prevStep

By default activates previous step. If target step is disabled activates the step before it.

setStep

Activates step at specified index.

Css Variables #

NameDefault Value
--va-stepper-step-button-inactive-color var(--va-secondary)
--va-stepper-step-button-hover-highlight-opacity 0.1
--va-stepper-step-button-disabled-opacity 0.5
--va-stepper-step-button-padding 1rem
--va-stepper-step-button-number-size 1.2rem
--va-stepper-step-button-icon-size 2rem
--va-stepper-step-button-gap 0.5rem
--va-stepper-step-button-icon-border-radius 100%
--va-stepper-step-border-radius var(--va-square-border-radius)
--va-stepper-divider-color var(--va-secondary)
--va-stepper-divider-length auto
--va-stepper-divider-min-length 2rem
--va-stepper-divider-thickness 1px
--va-stepper-divider-spacing 0.5rem
--va-stepper-divider-vertical-margin-left 2rem
--va-stepper-step-content-wrapper-padding 0.5rem 1rem
--va-stepper-step-content-margin 0.8rem 0 2rem
--va-stepper-controls-gap 1rem

Change log #