Collapsible
在原位展开与收起的内容区：面板按展开动效的时长展开到自身高度，收起时更快。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/collapsible示例
由按钮展开的备注
import { Button } from "@/components/zero/button";import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from "@/components/zero/collapsible";import { ChevronDownIcon } from "@/components/zero/icons";export default function CollapsibleBasic() { return ( <Collapsible className="grid w-full max-w-sm gap-3"> <CollapsibleTrigger render={ <Button variant="secondary" className="justify-self-start data-panel-open:[&_svg]:rotate-180 [&_svg]:transition-transform [&_svg]:duration-(--zero-dur-base)" /> } > Route notes <ChevronDownIcon /> </CollapsibleTrigger> <CollapsibleContent> <ul className="grid gap-2 font-medium font-zero-text text-zero-sm text-zero-text-2"> <li>Gate 4 is closed after 21:00.</li> <li>Keep to the east side of the yards.</li> <li>Sign for the crate at the north gate.</li> </ul> </CollapsibleContent> </Collapsible> );}行为
触发器本身不带样式，可通过 render 传入 Button。开启「减少动态效果」时，面板直接显示。
属性
CollapsibleTrigger, CollapsibleContent
另可传入 Base UI Collapsible.Trigger 的全部属性。