پرش به محتوا

جمع‌شونده

یک جفت ماشه و پنل برای درختان فایل، تنظیمات پیشرفته و بخش‌های «نمایش بیشتر» — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

"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.json
npx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/collapsible.json

وابستگی‌های زیر را نصب کنید:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

کد زیر را کپی کرده و در پروژهٔ خود جای‌گذاری کنید.

components/ui/collapsible.tsx
"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 را ببینید.