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
border是否显示外边框Booleanfalse默认值是:false
modelValue展开的选项,通过v-model绑定`stringstring[]`false

Slots

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