Sheet

ჯავშნისა და სტუმრის ინფორმაციის პანელი Base UI-ზე, კლავიატურის მხარდაჭერით.

მაგალითი

@llc-conciergia/ui/sheet

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@llc-conciergia/ui/sheet";

<Sheet><SheetTrigger className="rounded-md border border-border px-3 py-2">ჯავშნის ნახვა</SheetTrigger><SheetContent><SheetHeader><SheetTitle>ჯავშანი — ნომერი 204</SheetTitle><SheetDescription>სტუმარი ნინო მაისურაძე</SheetDescription></SheetHeader><SheetFooter><SheetClose>დაბრუნება</SheetClose></SheetFooter></SheetContent></Sheet>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@llc-conciergia/ui/sheet";

Conciergia CLI

npx @llc-conciergia/cli add sheet

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/sheet.json

შენიშვნები

ყოველთვის მიაწოდეთ სათაური, აღწერა და დახურვის ღილაკი. Escape ხურავს პანელს და ფოკუსს აბრუნებს გამხსნელზე.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
Sheet: open / defaultOpen	boolean	—	კონტროლირებადი ან საწყისი გახსნილი მდგომარეობა.
Sheet: onOpenChange	(open, details) => void	—	მდგომარეობის ცვლილების მოთხოვნა; გამოიყენეთ კლიენტურ კომპონენტში.
SheetTrigger	Base UI Trigger props	—	გამხსნელი ელემენტი; render, ref და მშობლიური ატრიბუტები.
SheetContent: container	HTMLElement \| RefObject	—	პორტალის კონტეინერი; ნაგულისხმევად document.body.
SheetContent: className / children / ref	Base UI Popup props	—	პანელის გაფორმება, შიგთავსი და ფოკუსის მართვა.
SheetHeader / SheetFooter	HTML div props	—	სათაურისა და მოქმედებების განლაგება.
SheetTitle / SheetDescription	Base UI label props	—	პანელის ხელმისაწვდომი სახელი და აღწერა.
SheetClose	Base UI Close props	—	ხურავს პანელს; მხარს უჭერს disabled და render-ს.
SheetContent: side	top \| right \| bottom \| left	—	პანელის მხარე; ნაგულისხმევად right.
SheetContent: hideClose	boolean	—	ჩაშენებული დახურვის ღილაკის დამალვა; ნაგულისხმევად false.