Accordion
დაჯგუფებული კითხვები კლავიატურით მართვითა და სიმაღლის ანიმაციით.
მაგალითი
სტუმრების მიღება იწყება 14:00 საათზე.
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@llc-conciergia/ui/accordion";
<Accordion variant="bordered" defaultValue={["arrival"]}>
<AccordionItem value="arrival">
<AccordionTrigger>როდის იწყება განთავსება?</AccordionTrigger>
<AccordionContent>სტუმრების მიღება იწყება 14:00 საათზე.</AccordionContent>
</AccordionItem>
<AccordionItem value="breakfast">
<AccordionTrigger>შედის საუზმე?</AccordionTrigger>
<AccordionContent>საუზმე ხელმისაწვდომია 08:00–11:00.</AccordionContent>
</AccordionItem>
</Accordion>;ინსტალაცია
pnpm add @llc-conciergia/uiimport {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@llc-conciergia/ui/accordion";npx @llc-conciergia/cli add accordionnpx shadcn@latest add https://ui.conciergia.co/r/accordion.jsonProps
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| Accordion: multiple | boolean | — | რამდენიმე პანელის ერთდროული გახსნა; ნაგულისხმევად false. |
| Accordion: collapsible | boolean | — | ყველა პანელის დახურვის უფლება; ნაგულისხმევად true. |
| Accordion: variant | "default" | "bordered" | "separated" | — | საზღვრის სტილი. |
| Accordion: value / defaultValue | string[] | — | გახსნილი ელემენტების მნიშვნელობების მასივი. |
| Accordion: onValueChange | (value, details) => void | — | კონტროლირებადი მნიშვნელობის განახლება. |
| Accordion: disabled / keepMounted / hiddenUntilFound | boolean | — | Base UI ქცევა და დახურული შიგთავსის შენარჩუნება. |
| AccordionItem: value / disabled | string / boolean | — | უნიკალური მნიშვნელობა და გათიშული ელემენტი. |
| AccordionTrigger | Base UI Trigger props | — | Header-ში მოთავსებული ღილაკი და ChevronDown. |
| AccordionContent | Base UI Panel props | — | children, className, keepMounted; სიმაღლის ანიმაცია. |
| ყველა ნაწილი | Base UI props | — | className, render, ref და შესაბამისი მშობლიური თვისებები. |