اعلان

toastکامپوننت

اعلان‌هایی که روی هم جمع میشن، با سقف تعداد، دکمه‌ی «بستن همه» و جایگاه قابل تنظیم، از طریق Provider و هوک.

سیستم طراحی

تغییرات ذخیره شد

۲ ثانیه پیش

نصب

با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add toast
نصب دستی
محتوای تب «کد» را در components/ui/toast.tsx بگذارید.
$ npm i lucide-react
کپی کل فایلregistry json

استفاده

usage.tsx

1// app/layout.tsx2import { ToastProvider } from "@/components/ui/toast"3<ToastProvider>{children}</ToastProvider>45// هر جای دیگر6const { toast } = useToast()7toast({ title: "تغییرات ذخیره شد", variant: "success", action: { label: "واگرد", onClick: undo } })

پراپ‌ها

پراپ	نوع	پیش‌فرض	توضیح
toast(options)	{ title; description?; variant?; action?; duration? }	-	نمایش اعلان. duration پیش‌فرض ۴۰۰۰ میلی‌ثانیه‌ست.
variant	"default" \| "success" \| "error"	-	آیکون و رنگ.
ToastProvider max / position	number / "bottom-start" \| "bottom-end" \| "top-start" \| "top-end"	3 / "bottom-start"	سقف اعلان‌های هم‌زمان و گوشه.

نکته‌های راست‌چین

اعلان‌ها در گوشه‌ی پایین راست (start) می‌نشینن، همان جایی که چشم فارسی‌خوان اول میره.
با بیش از یک اعلان، دکمه‌ی «بستن همه» ظاهر میشه و قدیمی‌ترها با رسیدن به سقف حذف میشن.

قبلینوار کناری بعدیهشدار