VExpansionPanel API

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
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.
`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.
`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.
`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.
`selected-class`	string	undefined
Configure the active CSS class applied when an item is selected.
`static`	boolean	false
Remove title size expansion when selected.
`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
`group:selected`	[{ value: boolean }]
Event that is emitted when an item is selected within a group.

Slots

never

never

never

`default`
The default Vue slot.
`text`
Slot for the component’s text content.
`title`
Slot for the component’s title content.

Exposed

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

`groupItem`
The current expansion panel within the group in `<v-expansion-panels>`.

SASS Variables

name	default
`$expansion-panel-active-margin`	16px
`$expansion-panel-active-title-min-height`	64px
`$expansion-panel-background-color`	rgb(var(--v-theme-surface))
`$expansion-panel-border-color`	rgba(var(--v-border-color), var(--v-border-opacity))
`$expansion-panel-border-radius`	settings.$border-radius-root
`$expansion-panel-color`	tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
`$expansion-panel-disabled-color`	tools.theme-color('on-surface', $expansion-panel-disabled-opacity)
`$expansion-panel-disabled-opacity`	0.26
`$expansion-panel-disabled-overlay`	0.12
`$expansion-panel-inset-active-max-width`	calc(100% - #{$expansion-panel-active-margin * 2})
`$expansion-panel-inset-max-width`	100%
`$expansion-panel-popout-active-max-width`	calc(100% + #{$expansion-panel-active-margin})
`$expansion-panel-popout-max-width`	calc(100% - #{$expansion-panel-active-margin * 2})
`$expansion-panel-text-padding`	8px 24px 16px
`$expansion-panel-title-font-size`	0.9375rem
`$expansion-panel-title-min-height`	48px
`$expansion-panel-title-padding`	16px 24px

#VExpansionPanel API

VExpansionPanel API