सामग्री पर जाएँ

संक्षारण योग्य

फ़ाइल ट्री, उन्नत सेटिंग्स और 'और देखें' अनुभागों के लिए एक ट्रिगर-और-पैनल जोड़ी — नियोब्रूटलिस्ट बॉर्डर्स-और-शैडोज़ ट्रीटमेंट के साथ।

"use client"

import * as React from "react"

कोलैप्सिबल अकॉर्डियन का एकल-सेक्शन भाई है: एक ट्रिगर, एक पैनल, खुला या बंद। यह Base UI Collapsible कंपोनेंट पर बना है और नियोब्रूटलिस्ट रेसिपी के अनुसार स्टाइल किया गया है: मोटे बॉर्डर, कठोर छायाएँ और बोल्ड टाइपोग्राफ़ी।

इसे इन स्थितियों में चुनें:

  • फ़ाइल ट्री और नेस्टेड नेविगेशन — फ़ोल्डर खोलने के लिए कोलैप्सिबल नेस्ट करें (नीचे फ़ाइल ट्री उदाहरण देखें)।
  • एडवांस्ड सेटिंग्स — आम विकल्प दिखते रखें, बाक़ी टॉगल के पीछे समेटें।
  • "Show more" कंटेंट — लंबे चेंजलॉग, कटे सूची, घने पेजों पर वैकल्पिक विवरण।

इंस्टॉलेशन

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 {
  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

कंट्रोल्ड स्टेट

स्टेट को कंट्रोल करने के लिए 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"

फ़ाइल ट्री

फ़ाइल ट्री बनाने के लिए नेस्टेड collapsibles का उपयोग करें.

import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

RTL

Neobrutalism में RTL सपोर्ट सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें.

"use client"

import * as React from "react"

एक्सेसिबिलिटी

कोलैप्सिबल WAI-ARIA Disclosure पैटर्न का पालन करता है: ट्रिगर असली बटन है, aria-expanded और aria-controls के साथ, ताकि स्क्रीन रीडर बताएँ कि पैनल खुला है या नहीं।

कीबोर्ड इंटरैक्शन:

कुंजीक्रिया
Tab / Shift + Tabट्रिगर पर / से फ़ोकस ले जाएँ
Space / Enterपैनल टॉगल करें

API रेफ़रेंस

अधिक जानकारी के लिए Base UI डॉक्युमेंटेशन देखें.