Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板,面板之间不影响

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

自定义面板标题

除了可以通过 title 属性以外,还可以通过具名 slot 来实现自定义面板的标题内容,以实现增加图标等效果。

TIP

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

自定义图标 2.8.3

除了使用 icon 属性外,您还可以自定义面板项目图标,从而添加自定义内容。

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Custom icon position 2.9.10

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

expand icon position:
left

Collapse API

Collapse Attributes

属性名详情类型默认值
model-value / v-model当前活动面板,在手风琴模式下其类型是string,在其他模式下是arraystring / array
accordion是否手风琴模式booleanfalse
expand-icon-position 2.9.10set expand icon positionenumright

Collapse Events

事件名说明类型
change切换当前活动面板,在手风琴模式下其类型是string,在其他模式下是arrayFunction

Collapse Slots

插槽名Description子标签
default自定义默认内容Collapse Item

Collapse Exposes

属性名说明类型
activeNamescurrently active panel namesobject
setActiveNamesset active panel namesFunction

Collapse Item API

Collapse Item Attributes

插槽名说明Type默认值
name唯一标志符string / number
title面板标题string''
icon 2.8.3折叠项目的图标string / ComponentArrowRight
disabled是否禁用booleanfalse

Collapse Item Slot

NameDescriptionType
defaultCollapse Item 的内容
titleCollapse Item 的标题object
icon 2.8.3折叠项目图标的内容object

Collapse Item Exposes

NameDescriptionType
isActivewhether the current collapse item is activeobject

源代码

组件样式文档

贡献者