packages/docs/src/pages/en/components/expansion-panels.md
The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed.
Expansion panels in their simplest form display a list of expandable items. You can either declare the markup explicitly, or use the title and text props.
<ExamplesUsage name="v-expansion-panels" /> <PromotedEntry />| Component | Description |
|---|---|
| v-expansion-panels | Primary component |
| v-expansion-panel | Sub-component that wraps v-expansion-panel-text and v-expansion-panel-title |
| v-expansion-panel-title | Sub-component used to display the Expansion Panel's title. Wraps the #title slot |
| v-expansion-panel-text | Sub-component used to display the Expanion Panel's text. Wraps the #text slot |
There are four different variants of the expansion-panel. Accordion expansion-panels have no margins around the currently active panel. Inset expansion-panels become smaller when activated, while poput expansion-panels become larger.
<ExamplesExample file="v-expansion-panels/prop-variant" />Use gap to add spacing between accordion panels. Can be combined with :rounded="[outerRadius, innerRadius]" to adjust the panels corner rounding.
Both the expansion-panel and its content can be disabled using the disabled prop.
<ExamplesExample file="v-expansion-panels/prop-disabled" /> <!-- #### Focusable The expansion-panel headers can be made focusable with the prop **focusable**. <ExamplesExample file="v-expansion-panels/prop-focusable" /> -->Expansion panels can be controlled externally by using the v-model. You will need to set a value on each panel, so that you can refer to them outside the component. If the multiple prop is set, then the v-model value will be an array.
<ExamplesExample file="v-expansion-panels/prop-model" />readonly prop does the same thing as disabled, but it doesn't touch styles.
<ExamplesExample file="v-expansion-panels/prop-readonly" />The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the v-expansion-panel-title component to react to the state of being open or closed by fading content in and out.
Expand action icon can be customized with expand-icon prop or the actions slot.