Collapse 折叠面板

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

基础用法

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

Title A

AAAAAAAAAAAA

Title B

BBBBBBBBBBBBBB

Disabled Title

CCCCCCCCCCCCCCCCCC

<template>
  <div class="basic block">
    <Collapse v-model="openedValue">
      <CollapseItem name="a" title="Title A">
        <div>AAAAAAAAAAAA</div>
      </CollapseItem>
      <CollapseItem name="b" title="Title B">
        <div>BBBBBBBBBBBBBB</div>
      </CollapseItem>
      <CollapseItem name="c" title="Disabled Title" disabled>
        <div>CCCCCCCCCCCCCCCCCC</div>
      </CollapseItem>
    </Collapse>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Collapse, CollapseItem } from "study-element";
const openedValue = ref([]);
</script>

手风琴效果

每次只能展开一个面板

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

Title A

AAAAAAAAAAAA

Title B

BBBBBBBBBBBBBB

Title C

CCCCCCCCCCCCCCCCCC

<template>
  <div class="basic block">
    <Collapse v-model="openedValue" accordion>
      <CollapseItem name="a" title="Title A">
        <div>AAAAAAAAAAAA</div>
      </CollapseItem>
      <CollapseItem name="b" title="Title B">
        <div>BBBBBBBBBBBBBB</div>
      </CollapseItem>
      <CollapseItem name="c" title="Title C">
        <div>CCCCCCCCCCCCCCCCCC</div>
      </CollapseItem>
    </Collapse>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Collapse, CollapseItem } from "study-element";
const openedValue = ref("a");
</script>

Collapse Attributes

Name	Description	Type	Accepted Values	Default
model-value / v-model	当前激活 panel	string (accordion mode) / array (non-accordion mode)	—	—
accordion	是否开启手风琴模式	boolean	—	false

Collapse Events

Name	Description	Parameters
change	激活 panel 被改变时触发	(activeNames: array (non-accordion mode) / string (accordion mode))

Collapse Slots

Name	Description	Subtags
-	插入 Collapse Item 的插槽	Collapse Item

Collapse Item Attributes

Name	Description	Type	Accepted Values	Default
name	panel 名称	string | number	—	—
title	panel title	string	—	—
disabled	是否禁用	boolean	—	—

Collapse Item Slot

Name	Description
—	Collapse Item 内容
title	Collapse Item title