BlogPlaygroundOne

VStepperItem API

ads via vuetify

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

Removes the ability to click or target the component.

editable
boolean

false

Marks step as editable.

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

'$edit'

Icon to display when step is editable.

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.

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

undefined

Apply a specific icon using the v-icon component.

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

true

Applies the v-ripple directive.

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.

subtitle
string

undefined

Specify a subtitle text for the component.

title
string

undefined

Specify a title text for the component.

value
any

undefined

The value used when the component is selected in a group. If not provided, a unique ID will be used.

Events
name
type
group:selected
[{ value: boolean }]

Event that is emitted when an item is selected within a group.

Slots
{ 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 }
{ canEdit: boolean hasError: boolean hasCompleted: boolean title: string | number subtitle: string | number step: any }
default

The default Vue slot.

icon

Slot for customizing all stepper item icons.

subtitle

Slot for the component’s subtitle content.

title

Slot for the component’s title content.