جمعشونده
یک جفت ماشه و پنل برای درختان فایل، تنظیمات پیشرفته و بخشهای «نمایش بیشتر» — با جلوهی نئوبروتالیستی مرزها و سایهها.
"use client"
import * as React from "react"Collapsible خواهر تکبخشی آکاردئون است: یک تریگر، یک پنل، باز یا بسته. بر پایهٔ Base UI Collapsible ساخته شده و با دستور پخت نئوبروتالیستی استایل شده: حاشیههای ضخیم، سایههای سخت و تایپوگرافی پررنگ.
برای این موارد از آن استفاده کنید:
- درخت فایل و ناوبری تو در تو — collapsibleها را تو در تو کنید تا پوشهها باز شوند (نمونهٔ درخت فایل پایین را ببینید).
- تنظیمات پیشرفته — گزینههای رایج را نمایان نگه دارید و بقیه را پشت toggle جمع کنید.
- محتوای «نمایش بیشتر» — changelogهای بلند، فهرستهای کوتاهشده، جزئیات اختیاری در صفحات متراکم.
نصب#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/collapsible.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/collapsible.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/collapsible.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
وابستگیهای زیر را نصب کنید:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
کد زیر را کپی کرده و در پروژهٔ خود جایگذاری کنید.
"use client"
import { Collapsible as CollapsiblePrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}
function CollapsibleTrigger({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
)
}
function CollapsibleContent({
className,
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
// Radix publishes the measured height as
// `--radix-collapsible-content-height`; the collapsible-down/up keyframes
// interpolate against it for a real slide open/close.
className={cn(
"overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
className
)}
{...props}
/>
)
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
مسیرهای import را مطابق با پیکربندی پروژهٔ خود بهروزرسانی کنید.
استفاده#
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>ترکیب#
برای ساخت یک Collapsible از ترکیب زیر استفاده کنید:
Collapsible
├── CollapsibleTrigger
└── CollapsibleContentحالت کنترلشده#
برای کنترل حالت از propهای open و onOpenChange استفاده کنید.
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>
)
}نمونهها#
پایه#
import { ChevronDownIcon } from "@/registry/icons/__lucide__"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"پنل تنظیمات#
برای نمایش تنظیمات بیشتر از یک دکمهٔ تریگر استفاده کنید.
"use client"
import * as React from "react"درخت فایل#
برای ساخت یک درخت فایل از collapsibleهای تودرتو استفاده کنید.
import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"
import { Button } from "@/components/ui/button"RTL#
برای فعالسازی پشتیبانی RTL در Neobrutalism، راهنمای پیکربندی RTL را ببینید.
"use client"
import * as React from "react"دسترسیپذیری#
Collapsible از الگوی WAI-ARIA Disclosure پیروی میکند: تریگر یک دکمهٔ واقعی با aria-expanded و aria-controls است تا صفحهخوان باز یا بسته بودن پنل را اعلام کند.
تعاملات صفحهکلید:
| کلید | عمل |
|---|---|
Tab / Shift + Tab | انتقال فوکوس به و از تریگر |
Space / Enter | باز/بسته کردن پنل |
مرجع API#
برای اطلاعات بیشتر، مستندات Base UI را ببینید.