Collapse 折叠面板

将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。

代码演示

手风琴基础用法

需要配合CollapseItem使用,通过 accordion 可以设置为手风琴模式,最多展开一个面板, 默认为true

<hd-collapse accordion>
  <hd-collapse-item title="标题1" name="1" index="1">内容</hd-collapse-item>
  <hd-collapse-item title="标题2" name="2" index="2">内容</hd-collapse-item>
  <hd-collapse-item title="标题3" name="3" index="3">内容</hd-collapse-item>
</hd-collapse>
``


```js
export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

Props

NameDescriptionTypeRequiredDefault
accordion是否开启手风琴模式Booleanfalse默认值是:false

Events

Event NameDescriptionParameters
change当前激活面板展开时触发(如果是手风琴模式,参数activeNames类型为String,否则为Array)value: String / Array

Slots

NameDescriptionDefault Slot Content
defaulthd-collapse内部自定义内容,通常配合hd-collapse-item使用-