VStepperWindow API

Props

name	type	default
`crossfade`	boolean	false
Enables crossfade transition.
`direction`	'vertical' \| 'horizontal'	'horizontal'
The transition direction when changing windows.
`disabled`	boolean	false
Removes the ability to click or target the component.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`reverse`	boolean	false
Reverse the normal transition direction.
`selected-class`	string	'v-window-item--active'
Configure the active CSS class applied when an item is selected.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`transition-duration`	number	undefined
Overrides transition duration. Does not work in firefox, safari <18, or with `prefers-reduced-motion: reduce`.
`vertical-arrows`	boolean \| 'left' \| 'right'	false
Displays the navigation arrows vertically instead of horizontally.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  group: {
    register: (
      item: {
        id: string
        value: Ref<unknown, unknown>
        disabled: Ref<boolean | undefined, boolean | undefined>
        useIndexAsValue: boolean
      },
      cmp: ComponentInternalInstance,
    ) => void
    unregister: (id: string) => void
    select: (id: string, value: boolean) => void
    selected: Ref<readonly string[], readonly string[]>
    isSelected: (id: string) => boolean
    prev: () => void
    next: () => void
    selectedClass: Ref<string | undefined, string | undefined>
    items: Readonly<
      Ref<
        { id: string; value: unknown; disabled: boolean | undefined }[],
        { id: string; value: unknown; disabled: boolean | undefined }[]
      >
    >
    disabled: Ref<boolean | undefined, boolean | undefined>
    getItemIndex: (value: unknown) => number
  }
}

{
  group: {
    register: (
      item: {
        id: string
        value: Ref<unknown, unknown>
        disabled: Ref<boolean | undefined, boolean | undefined>
        useIndexAsValue: boolean
      },
      cmp: ComponentInternalInstance,
    ) => void
    unregister: (id: string) => void
    select: (id: string, value: boolean) => void
    selected: Ref<readonly string[], readonly string[]>
    isSelected: (id: string) => boolean
    prev: () => void
    next: () => void
    selectedClass: Ref<string | undefined, string | undefined>
    items: Readonly<
      Ref<
        { id: string; value: unknown; disabled: boolean | undefined }[],
        { id: string; value: unknown; disabled: boolean | undefined }[]
      >
    >
    disabled: Ref<boolean | undefined, boolean | undefined>
    getItemIndex: (value: unknown) => number
  }
}

{
  props: {
    icon:
      | string
      | (string | [string, number])[]
      | (new () => any)
      | FunctionalComponent
    class: string
    onClick: () => void
    'aria-label': string
  }
}

{
  props: {
    icon:
      | string
      | (string | [string, number])[]
      | (new () => any)
      | FunctionalComponent
    class: string
    onClick: () => void
    'aria-label': string
  }
}

`additional`
Slot for additional content at the end of the component.
`default`
The default Vue slot.
`next`
Slot displaying the arrow switching to the next item.
`prev`
Slot displaying the arrow switching to the previous item.

#VStepperWindow API

VStepperWindow API