Collapsible
collapsible折叠区 · Base UI collapsible 薄包 + 高度过渡(复用 Accordion --collapsible-panel-height)
用法
基础用法
点击标题展开 / 收起补充内容，默认折叠。
tsx
<Collapsible className="w-80">
<CollapsibleTrigger>展开查看详情</CollapsibleTrigger>
<CollapsiblePanel>这里是默认折叠起来的补充内容，点击标题即可展开。</CollapsiblePanel>
</Collapsible>默认展开
非受控用 defaultOpen 让面板初始即展开。
这里是默认展开的补充内容，再次点击标题即可收起。
tsx
<Collapsible defaultOpen className="w-80">
<CollapsibleTrigger>收起详情</CollapsibleTrigger>
<CollapsiblePanel>这里是默认展开的补充内容，再次点击标题即可收起。</CollapsiblePanel>
</Collapsible>禁用态
disabled 下触发器置灰且不可展开。
tsx
<Collapsible disabled className="w-80">
<CollapsibleTrigger>已禁用</CollapsibleTrigger>
<CollapsiblePanel>禁用态下不可展开。</CollapsiblePanel>
</Collapsible>何时用
单块「标题 + 可折叠内容」需要展开/收起时用（详情展开、查看更多、可选高级配置）。多组并列、需要互斥单开用 Accordion；纯导航跳转用 Command。
导入
ts
import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
Collapsible.open | boolean | — | 受控展开态 |
Collapsible.defaultOpen | boolean | false | 非受控初始展开态 |
Collapsible.disabled | boolean | false | 禁用，不可展开 |
Collapsible.className | string | — | 容器类名 |
CollapsibleTrigger.disabled | boolean | false | 单独禁用触发器 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
Collapsible.onOpenChange | (open: boolean) => void | 展开态变化回调（瑚琏收敛签名，丢 Base UI eventDetails，同 Switch/Toggle 风格） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
Collapsible.children | ReactNode | 包含 Trigger + Panel |
CollapsibleTrigger.children | ReactNode | 标题行内容 |
CollapsiblePanel.children | ReactNode | 折叠区内容 |
禁忌 / 坑
- 高度过渡复用 Base UI 暴露的
--collapsible-panel-heightCSS 变量做纯 CSS transition，padding 放 Panel 内层 div 否则收起塌不到 0；别手测scrollHeight或上动画库。详见 [[base-ui-accordion-panel-height-css-var-pure-css-transition]]。 - 受控用
open+onOpenChange，非受控用defaultOpen，二者不要混用。
相关
Command · ContextMenu · Toolbar · Accordion · Link · AnimatedThemeToggler
Playground
<Collapsible>
<CollapsibleTrigger>标题</CollapsibleTrigger>
<CollapsiblePanel>内容</CollapsiblePanel>
</Collapsible>