title: Collapse
Use Collapse to store contents.
You can expand multiple panels
:::demo
collapse/basic
:::
In accordion mode, only one panel can be expanded at once
:::demo Activate accordion mode using the accordion
attribute.
collapse/accordion
:::
Besides using the title
attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
:::demo
collapse/customization
:::
Name | Description | Type | Accepted Values | Default |
---|---|---|---|---|
model-value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |
accordion | whether to activate accordion mode | boolean | — | false |
Name | Description | Parameters |
---|---|---|
change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
Name | Description | Subtags |
---|---|---|
- | customize default content | Collapse Item |
Name | Description | Type | Accepted Values | Default |
---|---|---|---|---|
name | unique identification of the panel | string/number | — | — |
title | title of the panel | string | — | — |
disabled | disable the collapse item | boolean | — | — |
Name | Description |
---|---|
— | content of Collapse Item |
title | content of Collapse Item title |