Collapsible

Collapsible 是对 @base-ui/react/collapsible 的薄封装，提供可折叠/展开的内容容器。

引入

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "aui-components";

基本用法

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content to show/hide</CollapsibleContent>
</Collapsible>

子组件

子组件	说明
`Collapsible`	根容器，管理 open/close 状态
`CollapsibleTrigger`	触发切换的按钮
`CollapsibleContent`	可折叠的内容区域

Props

属性	类型	默认值	说明
`open`	`enum`	—	Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
`defaultOpen`	`enum`	`false`	Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.
`onOpenChange`	`enum`	—	Event handler called when the panel is opened or closed.
`disabled`	`enum`	`false`	Whether the component should ignore user interaction.
`className`	`enum`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`enum`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`enum`	—	Style applied to the element, or a function that returns a style object based on the component's state.

继承所有 @base-ui/react CollapsiblePrimitive.Root 的 Props：

<Collapsible
  open={isOpen} // 受控模式
  onOpenChange={setIsOpen} // 受控回调
  defaultOpen={false} // 默认展开状态
/>

CollapsibleTrigger

继承所有 @base-ui/react CollapsiblePrimitive.Trigger 的 Props。

CollapsibleContent

继承所有 @base-ui/react CollapsiblePrimitive.Panel 的 Props。

在组件库中的使用

Collapsible 是 Reasoning、ToolGroup、ToolFallback 的底层原语：

// ReasoningRoot 内部
<Collapsible ref={collapsibleRef} open={isOpen} onOpenChange={handleOpenChange}>
  <ReasoningTrigger />
  <CollapsibleContent>
    {" "}
    {/* 即 ReasoningContent */}
    <ReasoningText>{children}</ReasoningText>
  </CollapsibleContent>
</Collapsible>

完整示例

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

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger className="flex items-center gap-2">
    {open ? "Hide" : "Show"} details
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="mt-2 p-4 bg-muted rounded-lg">
      This content can be collapsed.
    </div>
  </CollapsibleContent>
</Collapsible>;