Collapse

Use Collapse to store contents.

Basic usage

You can expand multiple panels

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

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

TIP

Starting from version 2.9.10, the title slot provides an isActive property that indicates whether the current collapse item is active.

Besides using the icon attribute, you can customize icon of panel item with named slots, which makes adding custom content.

using the expand-icon-position attribute, you can customize icon position.

set the before-collapse property, If false is returned or a Promise is returned and then is rejected, will stop collapsing.

Name	Description	Type	Default
model-value / v-model	currently active panel, the type is `string` in accordion mode, otherwise it is `array`	`string` / `array`	[]
accordion	whether to activate accordion mode	`boolean`	false
expand-icon-position 2.9.10	set expand icon position	`enum`	right
before-collapse 2.9.11	before-collapse hook before the collapse state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop collapsing	`Function`	—

Name	Description	Type
change	triggers when active panels change, the parameter type is `string` in accordion mode, otherwise it is `array`	`Function`

Name	Description	Subtags
default	customize default content	Collapse Item

Name	Description	Type
activeNames	currently active panel names	`object`
setActiveNames	set active panel names	`Function`

Name	Description	Type	Default
name	unique identification of the panel	`string` / `number`	—
title	title of the panel	`string`	''
icon 2.8.3	icon of the collapse item	`string` / `Component`	ArrowRight
disabled	disable the collapse item	`boolean`	false