ComponentExpansion Panel

UI Library

Expansion Panel

Collapsible content groups.

Basic

Expansion panels in their simplest form display a list of expandable items. However, with the multiple prop, the expansion-panel can remain open until explicitly closed.

Accordion

Use accordion variant option to create Accordion panels. Accordion expansion-panel hasn't got margins around active panel.

Inset

Use inset variant option to create Inset panels. The inset expansion-panel becomes smaller when activated.

Popout

Use popout variant option to create expansion-panel with popout design. With it, expansion-panel is enlarged when activated.

Custom Icon

Expand action icon can be customized with expand-icon prop or the actions slot. Also, use the .no-icon-rotate class in conjunction with the VExpansionPanels component to disable icon rotation.

Gummies biscuit dessert macaroon liquorice carrot cake oat cake jelly beans cake. Candy wafer tiramisu sugar plum sweet. Ice cream topping gummies biscuit soufflé marzipan topping brownie marshmallow. Chocolate cake cookie pudding gummies cotton candy ice cream. Pie liquorice marzipan cake carrot cake macaroon jelly toffee. Lollipop donut gummi bears caramels icing marzipan.
Model

Expansion panels can be controlled externally by modifying the v-model. If multiple prop is used then it is an array containing the indices of the open items.

Selected: []
With Border

Please use the .expansion-panels-width-border class in conjunction with the VExpansionPanels component to create panels with borders.