Skip to main content

​
Usage

The VExpansionPanel component is used to hide content until expanded. It must be used within a VExpansionPanels component. 
<template>
  <v-expansion-panels>
    <v-expansion-panel>
      <v-expansion-panel-title>
        Panel Title
      </v-expansion-panel-title>
      <v-expansion-panel-text>
        Panel content goes here
      </v-expansion-panel-text>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

​
Simple Panels

Use the title and text props for basic content: 
<template>
  <v-expansion-panels>
    <v-expansion-panel
      title="Panel 1"
      text="This is the content of panel 1"
    />
    <v-expansion-panel
      title="Panel 2"
      text="This is the content of panel 2"
    />
  </v-expansion-panels>
</template>

​
Styling

Customize the appearance with color, elevation, and rounded props: 
<template>
  <v-expansion-panel
    bg-color="primary"
    elevation="4"
    rounded="lg"
  >
    <v-expansion-panel-title>
      Styled Panel
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      Content
    </v-expansion-panel-text>
  </v-expansion-panel>
</template>

​
Props

​
title
string
Text content for the panel title
​
text
string
Text content for the panel body
​
bgColor
string
Applies specified color to the background
​
elevation
string | number
Designates an elevation applied to the component (0-24)
​
rounded
string | number | boolean
Designates the border-radius applied to the component
​
disabled
boolean
Disables the expansion panel
​
readonly
boolean
Makes the expansion panel read-only
​
expandIcon
IconValue
default:"$expand"
Icon to display when panel is collapsed
​
collapseIcon
IconValue
default:"$collapse"
Icon to display when panel is expanded
​
hideActions
boolean
Hides the expand/collapse icon
​
ripple
boolean | object
default:"false"
Applies the ripple directive
​
static
boolean
Removes the icon animation when expanding
​
focusable
boolean
Makes the panel title focusable
​
eager
boolean
Forces the component’s content to render on mount

​
Slots

​
default
slot
The default slot for custom content
​
title
slot
Slot for custom title content
​
text
slot
Slot for custom text content

​
Events

​
group:selected
event
Emitted when the panel selection state changes
VExpansionPanel must be used as a child of VExpansionPanels component to function properly.

Build docs developers (and LLMs) love

Get started for freeTalk to us