Drawer

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

მაგალითი

@llc-conciergia/ui/drawer

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from "@llc-conciergia/ui/drawer";

<Drawer><DrawerTrigger className="rounded-md border border-border px-3 py-2">ჯავშნის ნახვა</DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>ჯავშანი — ნომერი 204</DrawerTitle><DrawerDescription>სტუმარი ნინო მაისურაძე</DrawerDescription></DrawerHeader><DrawerFooter><DrawerClose>დაბრუნება</DrawerClose></DrawerFooter></DrawerContent></Drawer>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from "@llc-conciergia/ui/drawer";

Conciergia CLI

npx @llc-conciergia/cli add drawer

shadcn CLI

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

შენიშვნები

ყოველთვის მიაწოდეთ სათაური, აღწერა და დახურვის ღილაკი. Escape ხურავს პანელს და ფოკუსს აბრუნებს გამხსნელზე. snapPoints მიეთითება Drawer-ზე; DrawerContent-ის className-ით მიანიჭეთ მაქსიმალური საფეხურის შესაბამისი სიმაღლე, მაგალითად h-[80dvh]. პანელი განკუთვნილია ქვემოთ ჩამოსრიალებით დახურვისთვის.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
Drawer: open / defaultOpen	boolean	—	კონტროლირებადი ან საწყისი გახსნილი მდგომარეობა.
Drawer: onOpenChange	(open, details) => void	—	მდგომარეობის ცვლილების მოთხოვნა; გამოიყენეთ კლიენტურ კომპონენტში.
DrawerTrigger	Base UI Trigger props	—	გამხსნელი ელემენტი; render, ref და მშობლიური ატრიბუტები.
DrawerContent: container	HTMLElement \| RefObject	—	პორტალის კონტეინერი; ნაგულისხმევად document.body.
DrawerContent: className / children / ref	Base UI Popup props	—	პანელის გაფორმება, შიგთავსი და ფოკუსის მართვა.
DrawerHeader / DrawerFooter	HTML div props	—	სათაურისა და მოქმედებების განლაგება.
DrawerTitle / DrawerDescription	Base UI label props	—	პანელის ხელმისაწვდომი სახელი და აღწერა.
DrawerClose	Base UI Close props	—	ხურავს პანელს; მხარს უჭერს disabled და render-ს.
Drawer: snapPoints / snapPoint / defaultSnapPoint	(number \| string)[] / number \| string	—	სიმაღლის საფეხურები: 0–1 ეკრანის წილი, px ან rem.
Drawer: onSnapPointChange	(point, details) => void	—	სიმაღლის საფეხურის ცვლილება.
Drawer: snapToSequentialPoints	boolean	—	საფეხურების მიმდევრობით გავლა.