Collapse

Use Collapse to store contents.

Basic usage

You can expand multiple panels

:::demo

collapse/basic

:::

Accordion

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

:::demo Activate accordion mode using the accordion attribute.

collapse/accordion

:::

Custom title

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.

:::

:::demo

collapse/customization

:::

Custom icon ^(2.8.3)

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

:::demo

collapse/custom-icon

:::

Custom icon position ^(2.9.10)

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

:::demo

collapse/custom-icon-position

:::

Prevent collapsing ^(2.9.11)

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

:::demo

collapse/prevent-collapsing

:::

Collapse API

Collapse Attributes

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]'left' | 'right'	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]() => Promise<boolean> | boolean	—

Collapse Events

Name	Description	Type
change	triggers when active panels change, the parameter type is string in accordion mode, otherwise it is array	^[Function](activeNames: array | string) => void

Collapse Slots

Name	Description	Subtags
default	customize default content	Collapse Item

Collapse Exposes

Name	Description	Type
activeNames	currently active panel names	^[object]ComputedRef<(string | number)[]>
setActiveNames	set active panel names	^[Function](activeNames: (string | number)[]) => void

Collapse Item API

Collapse Item Attributes

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

Collapse Item Slot

Name	Description	Type
default	content of Collapse Item	—
title	content of Collapse Item title	^[object]{ isActive: boolean }
icon ^(2.8.3)	content of Collapse Item icon	^[object]{ isActive: boolean }

Collapse Item Exposes

Name	Description	Type
isActive	whether the current collapse item is active	^[object]ComputedRef<boolean | undefined>