BlogPlaygroundOne

VExpansionPanels 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

'$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.

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.

elevation
string | number

undefined

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

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.

mandatory
boolean | 'force'

false

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

max
number

undefined

Sets a maximum number of selections that can be made.

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.

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.

static
New in v3.4.0
boolean

false

Remove title size expansion when 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'

'default'

Applies a distinct style to the component.

Events
name
type
update:modelValue
[unknown]

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

Slots
{ prev: () => void; next: () => void }
default

The default Vue slot.

Exposed
() => void
() => void
next

Open the next panel from the currently selected panel.

prev

Open the previous panel from the currently selected panel.