გვერდითი პანელი · Sidebar
ადმინისტრაციული ნავიგაცია desktop-ის icon რეჟიმით და მობილური დიალოგით.
მაგალითი
სასტუმროს მართვა
"use client";
import { Bed, Users } from "lucide-react";
import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger } from "@llc-conciergia/ui/sidebar";
export function Example() { return <SidebarProvider className="min-h-80"><Sidebar collapsible="icon"><SidebarHeader><span className="group-data-[collapsible=icon]/sidebar:sr-only">სასტუმრო ირისი</span></SidebarHeader><SidebarContent><SidebarMenu><SidebarMenuItem><SidebarMenuButton isActive tooltip="ნომრები"><Bed aria-hidden="true" /><span>ნომრები</span></SidebarMenuButton></SidebarMenuItem><SidebarMenuItem><SidebarMenuButton tooltip="სტუმრები"><Users aria-hidden="true" /><span>სტუმრები</span></SidebarMenuButton></SidebarMenuItem></SidebarMenu></SidebarContent></Sidebar><SidebarInset><SidebarTrigger /><p className="mt-4">სასტუმროს მართვა</p></SidebarInset></SidebarProvider>; }ინსტალაცია
pnpm add @llc-conciergia/uiimport { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger } from "@llc-conciergia/ui/sidebar";npx @llc-conciergia/cli add sidebarnpx shadcn@latest add https://ui.conciergia.co/r/sidebar.jsonშენიშვნები
მობილურის ზღვარია 768px. მობილურზე ცალკე openMobile state და უშუალოდ Base UI Dialog გამოიყენება; Escape ხურავს და ფოკუსი უკან ბრუნდება. MenuButton-ში ტექსტი span-ში მოათავსეთ, ხატულა კი მის გვერდით: icon რეჟიმში ტექსტი ვიზუალურად იმალება, accessible name რჩება. საკუთარი სიგანე მიუთითეთ SidebarProvider.style-ში; ცვლადები მობილურ პორტალშიც გადადის.Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| SidebarProvider: defaultOpen / open / onOpenChange | boolean / boolean / (open) => void | — | defaultOpen=true; cookie-free კონტროლირებადი ან შიდა desktop state. |
| SidebarProvider: style | CSSProperties | — | --sidebar-width: 16rem; --sidebar-width-icon: 3.5rem. |
| useSidebar() | SidebarContextValue | — | open, setOpen, openMobile, setOpenMobile, isMobile, state, toggleSidebar. |
| Sidebar: side / variant / collapsible | left|right / sidebar|floating|inset / offcanvas|icon|none | — | ნაგულისხმევად left, sidebar, offcanvas. none ყოველთვის ხილულია. |
| SidebarTrigger / SidebarRail | ButtonProps / button props | — | პანელის გადართვა; ლოკალიზებული სახელი; Cmd/Ctrl+B-ც მუშაობს. |
| SidebarInset | main props | — | ძირითადი შიგთავსი. |
| SidebarHeader / SidebarFooter / SidebarContent | div props | — | ზედა, ქვედა და გადახვევადი შიგთავსი. |
| SidebarSeparator | hr props | — | სემანტიკური გამყოფი. |
| SidebarGroup / SidebarGroupLabel / SidebarGroupContent | div props | — | ნავიგაციის ჯგუფი, სათაური და შიგთავსი. |
| SidebarGroupAction / SidebarMenuAction | ButtonProps | — | მოქმედება; აუცილებლად მიეცით accessible name. |
| SidebarMenu / SidebarMenuItem | ul / li props | — | მენიუს სია და ელემენტი. |
| SidebarMenuButton: isActive / tooltip / size | boolean / string / sm|md|lg | — | აქტიური გვერდი, tooltip მხოლოდ icon რეჟიმში; ზომა md. |
| SidebarMenuButton: render / nativeButton / disabled | ButtonProps | — | ბმულისთვის render={<Link ... />} და nativeButton=false. |
| SidebarMenuBadge | span props | — | რაოდენობა; ტექსტსა და badge-ს შორის დატოვეთ padding. |
| SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton | ul / li / SidebarMenuButtonProps | — | ქვემენიუ; icon რეჟიმში იმალება. |
| SidebarMenuSkeleton: showIcon | boolean | — | სტაბილური ჩატვირთვის მაჩვენებელი; reduced motion უსაფრთხოა. |
| ყველა ნაწილი: className / ref | native HTML props | — | საკუთარი განლაგება და ელემენტის ref. |