Toast
შეტყობინებები სტატუსით, მოქმედებით, ჟესტით დახურვითა და მაუსის გადატარებისას გაშლადი დასტით.
მაგალითი
// app/layout.tsx — Toaster მოათავსეთ ერთხელ, აპლიკაციის ზედა დონეზე
import { Toaster } from "@llc-conciergia/ui/toast";
<Toaster position="bottom-right" limit={3}>{children}</Toaster>
// კლიენტის მოქმედება
import { toast } from "@llc-conciergia/ui/toast";
toast.success("ჯავშანი შენახულია", { description: "ნომერი 204" });
toast.promise(saveBooking(), {
loading: "ჯავშანი ინახება",
success: "შენახულია",
error: "შენახვა ვერ მოხერხდა",
});ინსტალაცია
pnpm add @llc-conciergia/uiimport { Toaster } from "@llc-conciergia/ui/toast";npx @llc-conciergia/cli add toastnpx shadcn@latest add https://ui.conciergia.co/r/toast.jsonშენიშვნები
Toaster მოათავსეთ მხოლოდ ერთხელ app layout-ში. toast გამოიძახეთ კლიენტზე, პროვაიდერის დამონტაჟების შემდეგ. დრო ჩერდება ფოკუსისას და მაუსის გადატარებისას. დახურვის ღილაკი თარგმნილია ka/en/ru.Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| Toaster: position | top-left | top-center | top-right | bottom-left | bottom-center | bottom-right | bottom-right | ეკრანზე მდებარეობა. |
| Toaster: limit / timeout | number | 3 / 5000 | ხილული შეტყობინებების ზღვარი და ავტომატური დახურვის დრო; 0 გამორთავს ტაიმერს. |
| Toaster: children | ReactNode | — | აპლიკაციის შიგთავსი; შეიძლება გამოტოვება. |
| toast(title, options) | (ReactNode, ToastOptions) => string | — | აბრუნებს ID-ს. საჭიროა უკვე დამონტაჟებული Toaster. |
| toast.success / error / warning / info / loading | (ReactNode, ToastOptions) => string | — | სტატუსის ხატულა; loading ავტომატურად არ იხურება. |
| ToastOptions | id, description, timeout, action, onClose | — | არსებული ID აახლებს შეტყობინებას. action: { label, onClick }. |
| toast.promise | (Promise<T>, { loading, success, error }) => Promise<T> | — | ცვლის იმავე შეტყობინების სტატუსს; success/error შეიძლება იყოს ტექსტის დამბრუნებელი ფუნქცია. |
| toast.dismiss | (id?: string) => void | — | ხურავს მითითებულ ან ყველა შეტყობინებას. |
| ToastContent | Toast.Root props & { top?: boolean } | — | ინდივიდუალური ბარათი Base UI Toast.Provider-ის შიგნით. toast არის ToastObject; top აწყობს დასტას ქვემოთ. |