useStepper ​
Provides helpers for building a multi-step wizard interface.
Demo ​
Form
{ "firstName": "Jon", "lastName": "", "billingAddress": "", "contractAccepted": false, "carbonOffsetting": false, "payment": "credit-card" }
Wizard
{ "steps": { "user-information": { "title": "User information" }, "billing-address": { "title": "Billing address" }, "terms": { "title": "Terms" }, "payment": { "title": "Payment" } }, "stepNames": [ "user-information", "billing-address", "terms", "payment" ], "index": 0, "current": { "title": "User information" }, "next": "billing-address", "isFirst": true, "isLast": false }
Usage ​
Steps as array ​
js
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper([
'billing-address',
'terms',
'payment',
])
// Access the step through `current`
console.log(current.value) // 'billing-address'
Steps as object ​
js
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper({
'user-information': {
title: 'User information',
},
'billing-address': {
title: 'Billing address',
},
'terms': {
title: 'Terms',
},
'payment': {
title: 'Payment',
},
})
// Access the step object through `current`
console.log(current.value.title) // 'User information'
Type Declarations ​
Show Type Declarations
typescript
export interface UseStepperReturn<StepName, Steps, Step> {
/** List of steps. */
steps: Readonly<Ref<Steps>>
/** List of step names. */
stepNames: Readonly<Ref<StepName[]>>
/** Index of the current step. */
index: Ref<number>
/** Current step. */
current: ComputedRef<Step>
/** Next step, or undefined if the current step is the last one. */
next: ComputedRef<StepName | undefined>
/** Previous step, or undefined if the current step is the first one. */
previous: ComputedRef<StepName | undefined>
/** Whether the current step is the first one. */
isFirst: ComputedRef<boolean>
/** Whether the current step is the last one. */
isLast: ComputedRef<boolean>
/** Get the step at the specified index. */
at: (index: number) => Step | undefined
/** Get a step by the specified name. */
get: (step: StepName) => Step | undefined
/** Go to the specified step. */
goTo: (step: StepName) => void
/** Go to the next step. Does nothing if the current step is the last one. */
goToNext: () => void
/** Go to the previous step. Does nothing if the current step is the previous one. */
goToPrevious: () => void
/** Go back to the given step, only if the current step is after. */
goBackTo: (step: StepName) => void
/** Checks whether the given step is the next step. */
isNext: (step: StepName) => boolean
/** Checks whether the given step is the previous step. */
isPrevious: (step: StepName) => boolean
/** Checks whether the given step is the current step. */
isCurrent: (step: StepName) => boolean
/** Checks if the current step is before the given step. */
isBefore: (step: StepName) => boolean
/** Checks if the current step is after the given step. */
isAfter: (step: StepName) => boolean
}
export declare function useStepper<T extends string | number>(
steps: MaybeRef<T[]>,
initialStep?: T,
): UseStepperReturn<T, T[], T>
export declare function useStepper<T extends Record<string, any>>(
steps: MaybeRef<T>,
initialStep?: keyof T,
): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
Source ​
Contributors ​
Anthony Fu
Jelle Roorda
Ostap Brehin
sun0day
Enzo Innocenzi