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

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

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.

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 v-expansion-panels 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 v-expansion-panels component to create panels with borders.

CONTENTS

  • Introduction

  • Basic

  • Accordion

  • Inset

  • Popout

  • Custom Icon

  • Model

  • With Border