Collapse 折叠面板

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

基础用法

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

<script setup lang="ts">
import { type CollapseItemName } from "sj-element";
import { ref } from "vue";

const activeNames = ref(["1"]);

function handleChange(val: CollapseItemName[]) {
  console.log(val);
}
</script>

<template>
  <sj-collapse v-model="activeNames" @change="handleChange">
    <sj-collapse-item title="法国" name="1">
      <div>
        法国是浪漫与艺术的代名词，拥有着悠久的历史和丰富的文化遗产。巴黎不仅是全球时尚与艺术的中心，还有着世界著名的博物馆、古老的街道和浪漫的咖啡馆。
      </div>
      <div>
        法国的美食更是世界一流，从美味的法式大餐到简单的街头小吃，每一道菜肴都充满了艺术感和风味。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="中国" name="2">
      <div>
        中国，是世界上最古老的文明之一，拥有超过五千年的历史。古代的长城、故宫以及丝绸之路等历史遗迹，至今仍然吸引着成千上万的游客。
      </div>
      <div>
        中国的文化博大精深，不仅有传统的诗词歌赋、书法绘画，还有如今蓬勃发展的现代艺术与科技。这里的美食更是丰富多样，遍布大江南北。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="英国" name="3">
      <div>
        英国以其深厚的历史背景和独特的文化吸引着世界。伦敦，作为全球的金融与文化中心，拥有着无数的博物馆、历史建筑与公园。
      </div>
      <div>
        英国人对文学的热爱远近闻名，莎士比亚、狄更斯等伟大的作家创作出了无数经典作品。此外，英国的下午茶和皇家文化也是其标志性特色。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="美国" name="4">
      <div>
        美国是一个充满活力和创新的国度。它的文化多元，汇聚了世界各地的移民，创造了一个充满机会与挑战的环境。纽约、洛杉矶等大都市更是世界文化的缩影。
      </div>
      <div>
        美国不仅是全球科技和商业的领袖，它的娱乐产业也具有强大的影响力。好莱坞的电影、纽约的百老汇，都深深影响着全球文化。
      </div>
    </sj-collapse-item>
  </sj-collapse>
</template>

手风琴模式

通过 accordion 属性可以启用手风琴模式，手风琴模式下，最多只能展开一个面板，展开新的面板时，其他面板会自动收起。

<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

<template>
  <sj-collapse v-model="activeNames" accordion>
    <sj-collapse-item title="法国" name="1">
      <div>
        法国，作为世界文化和艺术的重镇，拥有悠久的历史和丰富的文化遗产。巴黎是全球浪漫的象征，而法国的葡萄酒、美食和时尚也是世界知名。
      </div>
      <div>
        法国的艺术和文学影响深远，从印象派画家到哲学家，都在这里留下了深刻的足迹。无论是塞纳河的浪漫，还是普罗旺斯的田园风光，都让人留连忘返。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="中国" name="2">
      <div>
        中国拥有超过五千年的悠久历史，古老的文明和丰富的文化底蕴令人惊叹。无论是长城、故宫，还是大熊猫，都是中国独特的文化象征。
      </div>
      <div>
        中国的传统艺术、诗词歌赋和哲学思想影响深远，而现代的科技和创新也日新月异，逐渐成为全球经济的重要力量。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="英国" name="3">
      <div>
        英国，作为世界上最具影响力的国家之一，拥有悠久的历史和辉煌的文化遗产。伦敦是全球的金融中心，也是许多历史建筑和博物馆的所在地。
      </div>
      <div>
        英国以其文学成就著称，莎士比亚、查尔斯·狄更斯等伟大作家在这里留下了不可磨灭的印记。而英国的皇家文化和经典的下午茶，也充满了浓厚的英式风情。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="美国" name="4">
      <div>
        美国是一个多元文化的熔炉，充满了创新精神和自由氛围。从硅谷的科技创新到好莱坞的电影工业，美国的影响力遍布全球。
      </div>
      <div>
        美国的自然景观也极为壮丽，从大峡谷的雄伟到黄石公园的奇观，展现了大自然的鬼斧神工。美国文化充满活力，是许多人梦想的“机会之地”。
      </div>
    </sj-collapse-item>
  </sj-collapse>
</template>

自定义面板标题

通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

<template>
  <sj-collapse v-model="activeNames" accordion>
    <sj-collapse-item name="1">
      <template #title>
        <span style="color: var(--sj-color-success)"> 法国 </span>
        <sj-icon icon="edit" />
      </template>
      <div>
         法国是浪漫与艺术的象征，拥有世界著名的博物馆和艺术作品。巴黎的埃菲尔铁塔和香榭丽舍大道是全球浪漫主义的代表。
      </div>
      <div>
        法国不仅有独特的美食文化，从法式大餐到街头小吃，每一道菜肴都充满了艺术感和风味，让人沉醉。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="中国" name="2">
      <div>
         中国拥有悠久的历史和丰富的文化遗产，长城、故宫等古迹展现了五千年文明的辉煌。而中国的现代化进程也日新月异，成为世界重要的文化和经济大国。
      </div>
      <div>
        中国的美食文化博大精深，五湖四海的地方菜系让每一顿饭都充满了惊喜与独特风味，麻辣的川菜、鲜美的粤菜，令人难忘。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="英国" name="3">
      <div>
        英国以其深厚的历史底蕴和独特的文化魅力吸引着全球游客。伦敦的博物馆和剧院是世界文化的重要组成部分，而英伦风情也在全球范围内深受喜爱。
      </div>
      <div>
        英国的文学成就卓著，莎士比亚、查尔斯·狄更斯等作家的经典作品流传百世，影响着全球的文学和文化。
      </div>
      <div>
        Easy to identify: the interface should be straightforward, which helps
        the users to identify and frees them from memorizing and recalling.
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="美国" name="4">
      <div>
        美国是一个充满创新和活力的国度，作为全球科技与娱乐中心，硅谷的创新精神和好莱坞的电影魔力深刻影响着世界。
      </div>
      <div>
        美国的自然景观也是其魅力之一，大峡谷、黄石公园等地的壮丽景色吸引了无数游客前来探索这片神奇的土地。
      </div>
    </sj-collapse-item>
  </sj-collapse>
</template>

禁用状态

通过 disabled 属性来设置 CollapseItem 是否禁用。

<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

<template>
  <sj-collapse v-model="activeNames">
    <sj-collapse-item title="法国" name="1">
      <div>
        法国，以其浪漫的氛围和悠久的历史闻名。巴黎的埃菲尔铁塔、卢浮宫和香榭丽舍大街，吸引了世界各地的游客。
      </div>
      <div>
        法国人注重优雅和艺术，浪漫的文化深深植根于日常生活中，从美食到时尚，无不体现着细致入微的设计感。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="中国" name="2" >
      <div>
        中国，拥有五千年的历史，是世界上最古老的文明之一。这里的哲学、诗词和艺术深刻影响着全球。
      </div>
      <div>
       中国的传统文化博大精深，从孔子思想到道家哲学，每一部分都为世界文化遗产贡献了重要的智慧。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="英国" name="3">
      <div>
        英国是文学、历史和文化的摇篮。莎士比亚、查尔斯·狄更斯等文学巨匠，创造了许多永恒的经典作品。
      </div>
      <div>
        英国的建筑、博物馆、音乐会等，都是世界文化的瑰宝，英国的历史气息和皇家传统也令人神往。
      </div>
    </sj-collapse-item>
    <sj-collapse-item title="美国 禁了" name="4" disabled>
      <div>
        美国是现代文化、科技和经济的重心。这里的创新精神、自由思想和无限机遇吸引了全球各地的人才。
      </div>
      <div>
        美国的电影、音乐和科技产业也深刻影响了全球文化，硅谷的创新力与好莱坞的娱乐产业，使得美国成为世界的文化输出大国。
      </div>
    </sj-collapse-item>
  </sj-collapse>
</template>

Collapse API

Props

Name	Description	Type	Default
v-model	当前展开项的 name	CollapseItemName[]	[]
accordion	是否开启手风琴模式	boolean	false

Events

Name	Description	Type
change	切换面板时触发	(name: CollapseItemName[]) => void

Slots

Name	Description	Sub Component
default	默认插槽	CollapseItem

CollapseItem API

Props

Name	Description	Type	Default
name	唯一标识符	CollapseItemName	-
title	面板标题	string	""
disabled	是否禁用	boolean	false

Slots

Name	Description
default	默认插槽 ,CollapseItem 内容
title	CollapseItem 的标题

TIP

ps: 上面提到的 CollapseItemName 类型，可以理解为 string | number 类型。