Category | Utilities |
---|---|
Export Size | 433 B |
Last Changed | 10 months ago |
Provides helpers for building a multi-step wizard interface.
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'
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'
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]>
© 2019-present Anthony Fu
Licensed under the MIT License.
https://vueuse.org/core/useStepper/