BlogPlaygroundOne

VStepperVertical API

ads via vuetify

Props
name
type
default
alt-labels
boolean

false

Places the labels beneath the step.

bg-color
string

undefined

Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without bg- prefix (for example success, purple or bg-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

collapse-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$collapse'

Icon used when the expansion panel is in a collapsable state.

color
string

undefined

Applies specified color to the control - supports utility colors with or without text- prefix (for example success, purple or text-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

complete-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Icon to display when step is marked as completed.

disabled
boolean

false

Puts all children components into a disabled state.

eager
boolean

false

Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

editable
boolean

false

Marks step as editable.

edit-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Icon to display when step is editable.

elevation
string | number

undefined

Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.

error-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Icon to display when step has an error.

expand-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$expand'

Icon used when the expansion panel is in a expandable state.

flat
boolean

false

Removes the expansion-panel’s elevation and borders.

focusable
boolean

false

Makes the expansion-panel headers focusable.

hide-actions
boolean

false

Hide the expand icon in the content title.

item-props
SelectItemKey

'props'

Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component.

items
(string | Record<string, any>)[]

[]

An array of strings or objects used for automatically generating children components.

item-title
SelectItemKey

'title'

Property on supplied items that contains its title.

item-value
SelectItemKey

'value'

Property on supplied items that contains its value.

mandatory
boolean | 'force'

'force'

Forces at least one item to always be selected (if available).

max
number

undefined

Sets a maximum number of selections that can be made.

mobile
boolean

false

Forces the stepper into a mobile state, removing labels from stepper items.

mobile-breakpoint
number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'

undefined

Overrides the display configuration default screen size that the component should be considered in mobile.

model-value
unknown

undefined

Controls expanded panel(s). Defaults to an empty array when using multiple prop. It is recommended to set unique value prop for the panels inside, otherwise index is used instead.

multiple
boolean

false

Allows one to select multiple items.

next-text
string

'$vuetify.stepper.next'

The text used for the Next button.

non-linear
boolean

false

Allow user to jump to any step.

prev-text
string

'$vuetify.stepper.prev'

The text used for the Prev button.

readonly
boolean

false

Makes the entire expansion panel read only.

ripple
boolean | { class: string; keys: string[] }

false

Applies the v-ripple directive.

rounded
string | number | boolean

undefined

Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.

selected-class
string

undefined

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.

tile
boolean

false

Removes the border-radius.

variant
'default' | 'inset' | 'accordion' | 'popout'

'accordion'

Applies a distinct style to the component.

Events
name
type
update:modelValue
[unknown]

Event that is emitted when the component’s model changes.

Slots
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown } & { next: () => void; prev: () => void }
{ prev: () => void; next: () => void } & { step: unknown }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown } & { next: () => void; prev: () => void }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown } & { next: () => void; prev: () => void }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: unknown }
[`header-item.${string}`]

Slot for customizing header items when using the items prop.

[`item.${string}`]

Slot for customizing the content for each step.

actions

Slot for the actions.

default

The default Vue slot.

icon

Slot for customizing all stepper item icons.

next

Slot for customizing the next step functionality

prev

Slot for customizing the prev step functionality

subtitle

Slot for the component’s subtitle content.

title

Slot for the component’s title content.