Collapsible

折叠面板（Collapsible）用于在当前页面中隐藏或显示一段局部内容，适合展示可选详情、附加信息或可展开的配置区域。

import { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '@skyroc/web-ui';

架构说明

Collapsible 基于 Radix Collapsible 封装，主组件负责组合根容器和动画内容区，触发器通过 CollapsibleTrigger 放在 children 中。

• Collapsible：主组件，接收触发器区域 children，并通过 content 渲染可折叠内容。
• CollapsibleRoot：状态根容器，支持受控和非受控打开状态。
• CollapsibleContent：内容区，带展开/收起动画。
• CollapsibleTrigger：触发器，直接导出自 Radix，常配合 asChild 包裹按钮。

何时使用

• 页面中有次要信息，需要由用户按需展开时。
• 需要在列表、卡片或设置项中收纳额外内容时。
• 需要保持当前页面上下文，不希望打开 Dialog 或 Drawer 时。
• 如果内容是多个互斥展开项，优先使用 Accordion。

基础用法

将固定展示内容和 CollapsibleTrigger 放在 children 中，将可展开内容传给 content。

受控状态

通过 open 和 onOpenChange 可以完全控制展开状态；通过 defaultOpen 可以设置非受控默认状态。

const [open, setOpen] = useState(false);

<Collapsible open={open} onOpenChange={setOpen} content={<div>Details</div>}>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
</Collapsible>;

API

Collapsible

通用属性参考：支持 Radix Collapsible Root 的属性，如 open、defaultOpen、onOpenChange 和 disabled。

子组件

类型