Collapsible

折叠/展开容器,直接重导出自 reka-ui。适合 FAQ、筛选面板等需要按需显示内容的场景。

Anatomy

• Collapsible折叠根,维护 open 状态
  • CollapsibleTrigger触发器,点击切换展开/折叠;默认为原生 button
  • CollapsibleContent折叠内容区,关闭时自动 hidden

基本用法

默认折叠

非受控模式,点击 trigger 切换。

<script setup lang="ts">
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@tripo3d/design';
</script>

<template>
  <Collapsible class="w-80 flex flex-col gap-2">
    <CollapsibleTrigger class="h-9 rounded-2 bg-gray-3 px-3 text-left text-white">
      常见问题 1
    </CollapsibleTrigger>
    <CollapsibleContent class="rounded-2 bg-gray-4 px-3 py-2 text-sm text-white-80">
      这里是折叠展开后的详细内容。
    </CollapsibleContent>
  </Collapsible>
</template>

受控模式

v-model:open

外部状态驱动,适合要联动其他 UI 的场景。

<script setup lang="ts">
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@tripo3d/design';
import { ref } from 'vue';

const open = ref(false);
</script>

<template>
  <button @click="open = !open">
    {{ open ? '收起' : '展开' }}
  </button>
  <Collapsible v-model:open="open">
    <CollapsibleTrigger>内嵌 Trigger</CollapsibleTrigger>
    <CollapsibleContent>状态完全由外部 ref 控制</CollapsibleContent>
  </Collapsible>
</template>

禁用态

disabled

禁用后 Trigger 点击不再切换。

<Collapsible disabled>
  <CollapsibleTrigger>已禁用,点不动</CollapsibleTrigger>
  <CollapsibleContent>...</CollapsibleContent>
</Collapsible>

API

Collapsible Props

名称	类型	默认值	说明
open	boolean	—	受控展开状态
defaultOpen	boolean	—	非受控初始展开状态
disabled	boolean	—	禁用折叠切换

其余 props 透传至 reka-ui CollapsibleRoot。

Collapsible Events

事件	Payload	说明
update:open	(open: boolean)	展开状态变化

Slots

插槽	作用域	说明
default (Collapsible)	—	通常包含 Trigger 与 Content
default (CollapsibleTrigger)	—	触发器渲染内容
default (CollapsibleContent)	—	折叠区域的内容

可访问性

• 基于 reka-ui CollapsibleRoot,CollapsibleTrigger 自动带 aria-expanded 与 aria-controls
• 支持 Enter / Space 键切换
• 折叠态下 CollapsibleContent 自动从可达性树中移除(hidden)