Expansion Panel

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 expandable property, the expansion-panel can remain open until explicitly closed.

Usage

Accordion expansion panels can only have 1 panel open at a time.


API

Examples

Expand

Expand expansion panels will stay open until closed.


Popout & Inset

The expansion panel also has two alternative designs you can activate with the props popout and inset.


Custom icon

Expand action icon can be customized with expand-icon prop.


Focusable

The expansion panel headers can be made focusable with the prop focusable.