Collapse 按钮

Collapse 组件用于折叠和展开内容，通常用于节省空间或隐藏不必要的信息。它可以包含多个面板，每个面板可以单独折叠或展开。

基础用法

使用 v-model 来控制折叠面板的展开和收起状态。可以通过 accordion 属性来设置是否只能展开一个面板。

Title1

通过openValue设为默认展开

Title2

通过标题插槽自定义标题

Title3

通过默认插槽自定义内容

<script setup>
import { ref } from 'vue'
import { CbCollapse as Collapse, CbCollapseItem as CollapseItem } from '@ptpchips/carbon-ui'
const openValue = ref([1])
</script>
<template>
  <collapse v-model="openValue">
    <collapse-item :name="1" title="Title1">通过openValue设为默认展开</collapse-item
    ><collapse-item :name="2">
      <template #title>
        <b style="color: lightseagreen">Title2</b>
      </template>
      <div>通过标题插槽自定义标题</div>
    </collapse-item>
    <collapse-item :name="3">
      <template #title>
        <div>Title3</div>
      </template>
      <b style="color: yellowgreen">通过默认插槽自定义内容</b>
    </collapse-item>
  </collapse>
</template>