Use Collapse to store contents.

Basic usage

You can expand multiple panels


In accordion mode, only one panel can be expanded at once

Custom title

Besides using the title attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.

Collapse Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelcurrently active panelstring (accordion mode) / array (non-accordion mode)
accordionwhether to activate accordion modebooleanfalse

Collapse Events

Event NameDescriptionParameters
changetriggers when active panels change(activeNames: array (non-accordion mode) / string (accordion mode))

Collapse Slots

-customize default contentCollapse Item

Collapse Item Attributes

AttributeDescriptionTypeAccepted ValuesDefault
nameunique identification of the panelstring/number
titletitle of the panelstring
disableddisable the collapse itemboolean

Collapse Item Slot

content of Collapse Item
titlecontent of Collapse Item title