ჩანართები · Tabs
დაკავშირებული განყოფილებები კლავიატურით მართვადი ჩანართებით.
მაგალითი
თავისუფალი ნომრები: 12
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@llc-conciergia/ui/tabs";
export function Example() { return <Tabs defaultValue="rooms"><TabsList aria-label="სასტუმრო"><TabsTrigger value="rooms">ნომრები</TabsTrigger><TabsTrigger value="guests">სტუმრები</TabsTrigger><TabsTrigger value="archive" disabled>არქივი</TabsTrigger></TabsList><TabsContent value="rooms">თავისუფალი ნომრები: 12</TabsContent><TabsContent value="guests">სტუმრები: 24</TabsContent></Tabs>; }ინსტალაცია
pnpm add @llc-conciergia/uiimport { Tabs, TabsList, TabsTrigger, TabsContent } from "@llc-conciergia/ui/tabs";npx @llc-conciergia/cli add tabsnpx shadcn@latest add https://ui.conciergia.co/r/tabs.jsonშენიშვნები
ინდიკატორს TabsList ავტომატურად ამატებს; prefers-reduced-motion თიშავს გადასვლას. TabsList-ს მიეცით aria-label.Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| Tabs: value / defaultValue / onValueChange | Base UI Tabs.Root | — | აქტიური ჩანართის კონტროლი. |
| Tabs: orientation | horizontal | vertical | — | ისრების მიმართულება; ნაგულისხმევად horizontal. |
| TabsList: variant | underline | pills | segmented | — | underline ნაგულისხმევია; pills და segmented სინონიმებია. |
| TabsList: activateOnFocus / loopFocus | boolean | — | ორივე ნაგულისხმევად true; ისრები, Home და End მართავს ფოკუსს. |
| TabsTrigger: value / disabled | unknown / boolean | — | უნიკალური მნიშვნელობა; გამორთული ჩანართი გამოტოვებულია. |
| TabsContent: value / keepMounted | unknown / boolean | — | დაკავშირებული პანელი; Base UI-ის სიცოცხლის ციკლი. |
| ყველა ნაწილი: className / render / ref | Base UI props | — | სტილის, ელემენტის და ref-ის გადაცემა. |