Collapsible

collapsible

折叠或展开一块内容，带高度过渡

用法

基础用法

点击标题展开 / 收起补充内容，默认折叠。

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>

不画皮的面板

CollapsiblePanel 加 plain：不渲染内层皮肤 div。面板里装整套配置表单时用它，否则内容会被染成次要色、内边距也会双份。

连接状态已连接

关联仓库hulianui/hulian

tsx

<CollapsiblePanel plain>
  <div className="divide-y divide-border border-t border-border">
    <div className="flex items-center justify-between px-3 py-2.5 text-sm text-foreground">
      连接状态
      <span className="text-xs text-muted-foreground">已连接</span>
    </div>
    {/* …更多配置行 */}
  </div>
</CollapsiblePanel>

何时用

单块「标题 + 可折叠内容」需要展开/收起时用（详情展开、查看更多、可选高级配置）。多组并列、需要互斥单开用 Accordion；纯导航跳转用 Command。

导入

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`	单独禁用触发器
`CollapsiblePanel.plain`	`boolean`	`false`	不画皮：不渲染内层那层内边距 + 次要文字色的皮肤 div，children 直接进 Panel

plain：面板装的是一整块功能区

CollapsiblePanel 默认在 Base UI 的 Panel 里再套一层 px-3 pb-3 pt-1 text-sm text-muted-foreground 的皮肤 div——它是按「折叠区里放一段短说明」设计的。折叠区里装的是整块功能区（集成配置表单、权限编辑器、带 border-t 与逐行内边距的列表）时加 plain：

tsx

<CollapsiblePanel plain>
  <div className="divide-y divide-border border-t border-border">{/* 整块功能区 */}</div>
</CollapsiblePanel>

不加会撞两件事：text-muted-foreground 沿继承链把面板里所有没显式指定颜色的文字染成次要色（整块内容看起来像被禁用），内层的 px-3 又与内容自带的内边距叠加成双份。className 落在外层 Panel 上，够不着内层——再包一层能把颜色抢回来，内边距抢不回来。

同名的 plain 在 Accordion 的 Panel 与 Card 的 variant="plain" 上语义一致：内容自带外观时，要的不是改皮肤而是没有皮肤。

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-height CSS 变量做纯 CSS transition，padding 放 Panel 内层 div 否则收起塌不到 0；别手测 scrollHeight 或上动画库。详见 [[base-ui-accordion-panel-height-css-var-pure-css-transition]]。
受控用 open + onOpenChange，非受控用 defaultOpen，二者不要混用。
面板内容自带内边距/边框/正文色时加 plain，别再包一层去抢颜色——内边距抢不回来。

Playground

defaultOpendisabled

<Collapsible>
  <CollapsibleTrigger>标题</CollapsibleTrigger>
  <CollapsiblePanel>内容</CollapsiblePanel>
</Collapsible>

用法

基础用法

点击标题展开 / 收起补充内容，默认折叠。

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>

不画皮的面板

CollapsiblePanel 加 plain：不渲染内层皮肤 div。面板里装整套配置表单时用它，否则内容会被染成次要色、内边距也会双份。

连接状态已连接

关联仓库hulianui/hulian

tsx

<CollapsiblePanel plain>
  <div className="divide-y divide-border border-t border-border">
    <div className="flex items-center justify-between px-3 py-2.5 text-sm text-foreground">
      连接状态
      <span className="text-xs text-muted-foreground">已连接</span>
    </div>
    {/* …更多配置行 */}
  </div>
</CollapsiblePanel>

Props

名称	类型	默认	说明
`Collapsible.open`	`boolean`	-	受控展开态
`Collapsible.defaultOpen`	`boolean`	`false`	非受控初始展开态
`Collapsible.disabled`	`boolean`	`false`	禁用，不可展开
`Collapsible.className`	`string`	-	容器类名
`CollapsibleTrigger.disabled`	`boolean`	`false`	单独禁用触发器
`CollapsiblePanel.plain`	`boolean`	`false`	不画皮：不渲染内层那层内边距 + 次要文字色的皮肤 div，children 直接进 Panel

plain：面板装的是一整块功能区

事件

类型

说明

Collapsible.onOpenChange

(open: boolean) => void

展开态变化回调（瑚琏收敛签名，丢 Base UI eventDetails，同 Switch/Toggle 风格）

插槽

类型

说明

Collapsible.children

ReactNode

包含 Trigger + Panel

CollapsibleTrigger.children

ReactNode

标题行内容

CollapsiblePanel.children

ReactNode

折叠区内容

禁忌 / 坑

高度过渡复用 Base UI 暴露的 --collapsible-panel-height CSS 变量做纯 CSS transition，padding 放 Panel 内层 div 否则收起塌不到 0；别手测 scrollHeight 或上动画库。详见 [[base-ui-accordion-panel-height-css-var-pure-css-transition]]。

受控用 open + onOpenChange，非受控用 defaultOpen，二者不要混用。

面板内容自带内边距/边框/正文色时加 plain，别再包一层去抢颜色——内边距抢不回来。

Collapsible

用法

基础用法

默认展开

禁用态

不画皮的面板

何时用

导入

Props

plain：面板装的是一整块功能区

Events

Slots

禁忌 / 坑

相关

Playground

Collapsible

用法

基础用法

默认展开

禁用态

不画皮的面板

何时用

导入

Props

plain：面板装的是一整块功能区

Events

Slots

禁忌 / 坑

相关

Playground