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 can be controlled externally by modifying the
v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If
multiple prop is used then it is an array containing the indices of the open items.
Disabled and readonly
Both the expansion-panel and its content supports the
Popout, Inset & Accordion
The expansion-panel also has three alternative designs you can activate with the props popout, inset and accordion. Each displays expanded content differently.
Expand action icon can be customized with
expand-icon prop or the
The expansion-panel headers can be made focusable with the prop
The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of scoped slots in the
v-expansion-panel-header component to react to the state of being open or closed by fading content in and out.