संक्षारण योग्य
फ़ाइल ट्री, उन्नत सेटिंग्स और 'और देखें' अनुभागों के लिए एक ट्रिगर-और-पैनल जोड़ी — नियोब्रूटलिस्ट बॉर्डर्स-और-शैडोज़ ट्रीटमेंट के साथ।
"use client"
import * as React from "react"कोलैप्सिबल अकॉर्डियन का एकल-सेक्शन भाई है: एक ट्रिगर, एक पैनल, खुला या बंद। यह Base UI Collapsible कंपोनेंट पर बना है और नियोब्रूटलिस्ट रेसिपी के अनुसार स्टाइल किया गया है: मोटे बॉर्डर, कठोर छायाएँ और बोल्ड टाइपोग्राफ़ी।
इसे इन स्थितियों में चुनें:
- फ़ाइल ट्री और नेस्टेड नेविगेशन — फ़ोल्डर खोलने के लिए कोलैप्सिबल नेस्ट करें (नीचे फ़ाइल ट्री उदाहरण देखें)।
- एडवांस्ड सेटिंग्स — आम विकल्प दिखते रखें, बाक़ी टॉगल के पीछे समेटें।
- "Show more" कंटेंट — लंबे चेंजलॉग, कटे सूची, घने पेजों पर वैकल्पिक विवरण।
इंस्टॉलेशन#
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 {
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 डॉक्युमेंटेशन देखें.