组件
Order #4189
StatusShipped
"use client"
import * as React from "react"安装
🌐 Installation
pnpm dlx shadcn@latest add collapsible
用法
🌐 Usage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible"<Collapsible>
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
<CollapsibleContent>
Yes. Free to use for personal and commercial projects. No attribution
required.
</CollapsibleContent>
</Collapsible>受控状态
🌐 Controlled State
使用 open 和 onOpenChange 属性来控制状态。
🌐 Use the open and onOpenChange props to control the state.
import * as React from "react"
export function Example() {
const [open, setOpen] = React.useState(false)
return (
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
<CollapsibleContent>Content</CollapsibleContent>
</Collapsible>
)
}示例
🌐 Examples
基础
🌐 Basic
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {设置面板
🌐 Settings Panel
使用触发按钮显示更多设置。
🌐 Use a trigger button to reveal additional settings.
Radius
Set the corner radius of the element.
"use client"
import * as React from "react"文件树
🌐 File Tree
使用嵌套可折叠项来构建文件树。
🌐 Use nested collapsibles to build a file tree.
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {从右到左
🌐 RTL
要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。
🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.
الطلب #4189
الحالةتم الشحن
"use client"
import * as React from "react"API参考
🌐 API Reference
有关更多信息，请参阅 Radix UI 文档。
🌐 See the Radix UI documentation for more information.