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
Name | Description | Type | Required | Default |
---|---|---|---|---|
accordion | 是否开启手风琴模式 | Boolean | false | 默认值是:false |
border | 是否显示外边框 | Boolean | false | 默认值是:false |
modelValue | 展开的选项,通过v-model绑定 | `string | string[]` | false |
Slots
Name | Description | Default Slot Content |
---|---|---|
default | hd-collapse内部自定义内容,通常配合hd-collapse-item使用 | - |