Collapse 折叠面板

用于实现内容的折叠/展开功能。

基本用法

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

新闻列表 1

新闻列表 2

新闻列表 3

新闻列表 4

新闻列表 5

vue

<template>
  <ImCollapse>
    <ImCollapseItem :title="`新闻列表 ${item}`" :name="item" v-for="item in 5">
      一个很长的新闻内容，这里省略了。
    </ImCollapseItem>
  </ImCollapse>
</template>

手风琴模式

同时只能展开一个面板 (手风琴模式) 使用 v-model 绑定当前激活面板的 name

新闻列表 1

新闻列表 2

新闻列表 3

新闻列表 4

新闻列表 5

vue

<template>
  <ImCollapse v-model="activeName">
    <ImCollapseItem :title="`新闻列表 ${item}`" :name="item" v-for="item in 5">
      一个很长的新闻内容，这里省略了。
    </ImCollapseItem>
  </ImCollapse>
</template>

自定义标题插槽

通过插槽自定义手风琴模式的标题

自定义标题 1

自定义标题 2

自定义标题 3

自定义标题 4

自定义标题 5

vue

<template>
  <ImCollapse accordion>
    <ImCollapseItem :name="item" v-for="item in 5">
      <template #header>
        <span style="color: red;">自定义标题 {{ item }}</span>
      </template>
      一个很长的新闻内容，这里省略了。
    </ImCollapseItem>
  </ImCollapse>
</template>

Collapse 折叠面板 ​

基本用法 ​

手风琴模式 ​

自定义标题插槽 ​

APIS ​

Collapse 折叠面板

基本用法

手风琴模式

自定义标题插槽

APIS