BlogPlaygroundOne

VStepperVerticalItem API

ads via vuetify

Props
name
type
default
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

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
boolean

false
Marks step as complete.
complete-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$complete'
Icon to display when step is marked as completed.
disabled
boolean

false
Disables the expansion-panel content.
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

'$edit'
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
boolean

false
Puts the stepper item in a manual error state.
error-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$error'
Icon to display when step has an error.
expand-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

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

false
Makes the expansion panel content focusable.
height
string | number

undefined
Sets the height for the component.
hide-actions
boolean

false
Hide the expand icon in the content title.
icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined
Apply a specific icon using the v-icon component.
max-height
string | number

undefined
Sets the maximum height for the component.
max-width
string | number

undefined
Sets the maximum width for the component.
min-height
string | number

undefined
Sets the minimum height for the component.
min-width
string | number

undefined
Sets the minimum width for the component.
readonly
boolean

false
Makes the expansion panel content 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.
rules
ValidationRule[]

[]
Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string.
selected-class
string

undefined
Configure the active CSS class applied when an item is selected.
static
boolean

false
Remove title size expansion when selected.
subtitle
string

undefined
Specify a subtitle text for the component.
tag
string | (new () => any) | FunctionalComponent

'div'
Specify a custom tag used on the root element.
text
string

undefined
Specify content text for the component.
tile
boolean

false
Removes any applied border-radius from the component.
title
string

undefined
Specify a title text for the component.
value
any

undefined
Controls the opened/closed state of content.
width
string | number

undefined
Sets the width for the component.
Events
name
type
click:finish
[]

Event emitted when clicking the finish button
click:next
[]

Event emitted when clicking the next button
click:prev
[]

Event emitted when clicking the previous button
Slots
{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
} & { next: () => void; prev: () => void }

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
} & { next: () => void; prev: () => void }

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
} & { next: () => void; prev: () => void }

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

actions
Slot for the actions.
default
The default Vue slot.
icon
Slot to override the icon
next
Slot to override the next button
prev
Slot to override the previous button
subtitle
Slot for the component’s subtitle content.
text
Slot for the component’s text content.
title
Slot for the component’s title content.