AlertDialog

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

მაგალითი

@llc-conciergia/ui/alert-dialog

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@llc-conciergia/ui/alert-dialog";

<AlertDialog><AlertDialogTrigger className="rounded-md border border-border px-3 py-2">ჯავშნის ნახვა</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>ჯავშანი — ნომერი 204</AlertDialogTitle><AlertDialogDescription>სტუმარი ნინო მაისურაძე</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>დაბრუნება</AlertDialogCancel><AlertDialogAction variant="destructive">ჯავშნის გაუქმება</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@llc-conciergia/ui/alert-dialog";

Conciergia CLI

npx @llc-conciergia/cli add alert-dialog

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/alert-dialog.json

შენიშვნები

გარეთ დაწკაპუნება არ ხურავს დიალოგს. ასინქრონული მოქმედებისთვის აკონტროლეთ open; onClick-ში event.preventDefault() აჩერებს ავტომატურ დახურვას.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
AlertDialog: open / defaultOpen	boolean	—	კონტროლირებადი ან საწყისი გახსნილი მდგომარეობა.
AlertDialog: onOpenChange	(open, details) => void	—	მდგომარეობის ცვლილების მოთხოვნა; გამოიყენეთ კლიენტურ კომპონენტში.
AlertDialogTrigger	Base UI Trigger props	—	გამხსნელი ელემენტი; render, ref და მშობლიური ატრიბუტები.
AlertDialogContent: container	HTMLElement \| RefObject	—	პორტალის კონტეინერი; ნაგულისხმევად document.body.
AlertDialogContent: className / children / ref	Base UI Popup props	—	პანელის გაფორმება, შიგთავსი და ფოკუსის მართვა.
AlertDialogHeader / AlertDialogFooter	HTML div props	—	სათაურისა და მოქმედებების განლაგება.
AlertDialogTitle / AlertDialogDescription	Base UI label props	—	პანელის ხელმისაწვდომი სახელი და აღწერა.
AlertDialogCancel	Base UI Close props	—	ხურავს პანელს; მხარს უჭერს disabled და render-ს.
AlertDialogAction: variant	primary \| destructive	—	დადასტურების ღილაკი; ნაგულისხმევად primary. onClick-ით შეასრულეთ მოქმედება.