Collapse 折叠面板

可以折叠 / 展开的内容区域，支持配置式与复合式两种用法、手风琴模式、受控展开与无边框 ghost 等能力。

导入

import { Collapse, CollapsePanel } from "@reglow/reui";

何时使用

对复杂区域进行分组和隐藏，保持页面的整洁。
手风琴模式是一种特殊的折叠面板，只允许单个内容区域展开。
需要在面板标题上放置额外操作（extra）或自定义展开图标时。

代码演示

基础用法

通过 items 配置式渲染面板列表，defaultActiveKey 指定默认展开项。

<script setup lang="ts">
import { Collapse } from '@reglow/reui'

const items = [
  { key: '1', label: '面板一', children: '面板一的内容' },
  { key: '2', label: '面板二', children: '面板二的内容' },
  { key: '3', label: '面板三', children: '面板三的内容' },
]
</script>

<template>
  <Collapse :items="items" default-active-key="1" />
</template>

手风琴

accordion 为真时最多展开一个面板，再次点击已展开项会收起。

<script setup lang="ts">
import { Collapse, CollapsePanel } from '@reglow/reui'
</script>

<template>
  <Collapse accordion default-active-key="1">
    <CollapsePanel item-key="1" header="面板一">内容一</CollapsePanel>
    <CollapsePanel item-key="2" header="面板二">内容二</CollapsePanel>
    <CollapsePanel item-key="3" header="面板三">内容三</CollapsePanel>
  </Collapse>
</template>

复合式用法

不使用 items 时，默认插槽中放 CollapsePanel，可通过 header / extra / 默认插槽自由组合标题、额外操作与内容。

<script setup lang="ts">
import { ref } from 'vue'
import { Collapse, CollapsePanel } from '@reglow/reui'

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

<template>
  <Collapse v-model:active-key="activeKey">
    <CollapsePanel item-key="1" header="面板一">
      <template #extra>
        <a href="#" class="text-xs text-primary hover:underline" @click.stop.prevent>
          操作
        </a>
      </template>
      面板一的内容
    </CollapsePanel>
    <CollapsePanel item-key="2">
      <template #header>
        <span class="font-medium">自定义标题</span>
      </template>
      面板二的内容
    </CollapsePanel>
    <CollapsePanel item-key="3" header="面板三">面板三的内容</CollapsePanel>
  </Collapse>
</template>

幽灵模式与尺寸

size 影响标题高度与内容区内边距（small 32px / middle 40px / large 48px）；ghost 为无边框、透明背景；bordered=false 同样去掉外框，但保留背景色。

<script setup lang="ts">
import { Collapse } from '@reglow/reui'

const items = [
  { key: '1', label: '面板一', children: '面板一的内容' },
  { key: '2', label: '面板二', children: '面板二的内容' },
]
</script>

<template>
  <div class="space-y-2">
    <Collapse :items="items" size="small" default-active-key="1" />
    <Collapse :items="items" size="middle" default-active-key="1" />
    <Collapse :items="items" size="large" default-active-key="1" />
    <Collapse ghost :items="items" default-active-key="1" />
    <Collapse :bordered="false" :items="items" default-active-key="1" />
  </div>
</template>

展开图标

expandIconPosition="end" 将图标移到标题右侧；showArrow=false 隐藏图标；expandIcon 可自定义图标。

<script setup lang="ts">
import { h } from 'vue'
import { Minus, Plus } from 'lucide-vue-next'
import { Collapse } from '@reglow/reui'

const items = [
  { key: '1', label: '面板一', children: '面板一的内容' },
  { key: '2', label: '面板二', children: '面板二的内容' },
]

const noArrowItems = [
  { key: '1', label: '面板一（无图标）', showArrow: false, children: '面板一的内容' },
  { key: '2', label: '面板二（无图标）', showArrow: false, children: '面板二的内容' },
]

const expandIcon = ({ isActive }: { isActive: boolean }) =>
  h(isActive ? Minus : Plus, { class: 'size-4' })
</script>

<template>
  <div class="space-y-2">
    <Collapse :items="items" expand-icon-position="end" default-active-key="1" />
    <Collapse :items="noArrowItems" default-active-key="1" />
    <Collapse :items="items" :expand-icon="expandIcon" default-active-key="1" />
  </div>
</template>

API

Collapse Props

参数	说明	类型	默认值
activeKey	当前展开的面板 key，支持 `v-model:active-key`（传入即为受控）	`string \| number \| (string \| number)[]`	-
defaultActiveKey	默认展开的面板 key（非受控）	`string \| number \| (string \| number)[]`	-
accordion	手风琴模式，最多展开一个面板	`boolean`	`false`
bordered	是否显示边框与相邻面板分割线	`boolean`	`true`
ghost	无边框、透明背景（无外框、无分割线）	`boolean`	`false`
size	尺寸	`'small' \| 'middle' \| 'large'`	`'middle'`
expandIconPosition	展开图标位置	`'start' \| 'end'`	`'start'`
expandIcon	自定义展开图标	`(info: { isActive: boolean; panelKey: string \| number }) => VNode`	-
collapsible	面板级默认可交互模式	`'header' \| 'icon' \| 'disabled'`	`'header'`
destroyOnHidden	收起时是否销毁内容 DOM，面板级可覆盖	`boolean`	`false`
items	配置式面板列表	`CollapseItem[]`	`[]`
class	自定义样式类	`string`	-
style	自定义行内样式	`CSSProperties`	-

Collapse Events

事件	说明	回调参数
update:activeKey	展开项变化（`v-model`）	`(key: string \| number \| (string \| number)[] \| undefined)`
change	展开项变化	`(key: string \| number \| (string \| number)[] \| undefined)`
expand	展开项列表变化（对齐 antd）	`(keys: (string \| number)[])`

手风琴模式下 update:activeKey / change 回灌单值，全部收起时为 undefined；多选模式下回灌数组。

Collapse Slots

插槽	说明	参数
default	复合式面板（`CollapsePanel` 列表）	-
expandIcon	自定义展开图标（优先级低于 `expandIcon`）	`{ isActive: boolean; panelKey: string \| number }`

CollapsePanel Props

参数	说明	类型	默认值
itemKey	面板唯一标识（antd 中为 `key`，Vue 中 `key` 为保留属性）	`string \| number`	-
header	面板标题	`string \| VNode`	-
extra	标题右侧额外内容（在展开图标之前，点击不触发切换）	`VNode`	-
expandIcon	自定义展开图标，优先级高于 Collapse 的 `expandIcon`	`(info: { isActive: boolean; panelKey: string \| number }) => VNode`	-
collapsible	面板级可交互模式，覆盖 Collapse 的 `collapsible`	`'header' \| 'icon' \| 'disabled'`	-
showArrow	是否显示展开图标	`boolean`	`true`
disabled	是否禁用	`boolean`	`false`
forceRender	未展开时是否强制渲染内容	`boolean`	`false`
destroyOnHidden	收起时是否销毁内容，未设置时继承 Collapse	`boolean`	-
headerClass	标题附加类名	`string`	-
class	附加类名	`string`	-
style	附加行内样式	`CSSProperties`	-

CollapsePanel Slots

插槽	说明	参数
default	面板内容	-
header	面板标题（优先于 `header`）	-
extra	标题右侧额外内容（优先于 `extra`）	-
expandIcon	自定义展开图标	`{ isActive: boolean; panelKey: string \| number }`

CollapseItem

参数	说明	类型	默认值
key	面板唯一标识	`string \| number`	-
label	面板标题	`string \| VNode`	-
children	面板内容	`string \| VNode`	-
extra	标题右侧额外内容	`VNode`	-
showArrow	是否显示展开图标	`boolean`	`true`
collapsible	面板级可交互模式	`'header' \| 'icon' \| 'disabled'`	-
disabled	是否禁用	`boolean`	`false`
className	面板附加类名	`string`	-
style	面板附加样式	`CSSProperties`	-
forceRender	未展开时是否强制渲染内容	`boolean`	`false`
destroyOnHidden	收起时是否销毁内容	`boolean`	-
headerClass	标题附加类名	`string`	-

items 项未设置 showArrow / disabled / forceRender 时，由 Collapse 渲染时分别回退为 true / false / false。

Chat 聊天

AI 聊天界面组件集合：消息列表、输入框、思考过程、工具调用等。

Collapsible 折叠面板

展开或折叠内容的容器

内容锚点

导入
何时使用
代码演示
API