اعلان (Sonner)
سیستم toast برای نمایش اعلان‌های موقت
معرفی
کامپوننت Sonner (Toaster) برای نمایش اعلان‌های موقت و پیام‌های سیستمی استفاده می‌شود.
نصب
ابتدا Toaster را در layout اصلی خود اضافه کنید:
import { Toaster } from '@parto/ui';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
);
}استفاده
import { toast } from 'sonner';
// toast ساده
toast('پیام شما اینجاست');
// toast موفقیت
toast.success('عملیات موفقیت‌آمیز بود');
// toast خطا
toast.error('خطایی رخ داد');
// toast هشدار
toast.warning('این یک هشدار است');
// toast اطلاعات
toast.info('اطلاعاتی برای شما');با توضیحات
toast('رویداد برنامه‌ریزی شد', {
description: 'جلسه شما برای فردا ساعت ۱۰ صبح برنامه‌ریزی شده است',
});با دکمه Action
toast('آیا مطمئن هستید؟', {
action: {
label: 'بازگشت',
onClick: () => console.log('بازگشت'),
},
});Promise Toast
toast.promise(
fetch('/api/data'),
{
loading: 'در حال بارگذاری...',
success: 'داده‌ها بارگذاری شد',
error: 'خطا در بارگذاری',
}
);با مدت زمان سفارشی
toast('این پیام ۱۰ ثانیه نمایش داده می‌شود', {
duration: 10000,
});Dismissible
// قابل بستن (پیش‌فرض)
toast('پیام قابل بستن');
// غیرقابل بستن
toast('پیام مهم', {
dismissible: false,
});موقعیت
<Toaster position="top-center" />
<Toaster position="top-right" />
<Toaster position="bottom-center" />
<Toaster position="bottom-right" />با آیکون سفارشی
toast('پیام سفارشی', {
icon: <Icons.star className="w-4 h-4" />,
});حذف Toast
const toastId = toast('پیام');
// حذف toast خاص
toast.dismiss(toastId);
// حذف همه
toast.dismiss();Props
Toaster
| Prop | Type | Default | توضیحات |
|---|---|---|---|
position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'bottom-right' | موقعیت نمایش |
expand | boolean | false | باز شدن با hover |
richColors | boolean | false | رنگ‌های پررنگ‌تر |
closeButton | boolean | false | دکمه بستن |
toast options
| Option | Type | توضیحات |
|---|---|---|
description | string | توضیحات اضافی |
duration | number | مدت نمایش (ms) |
action | { label, onClick } | دکمه عمل |
dismissible | boolean | قابل بستن |
icon | ReactNode | آیکون سفارشی |
onDismiss | () => void | callback بستن |
onAutoClose | () => void | callback بستن خودکار |
انواع
toast()- پیام عادیtoast.success()- موفقیتtoast.error()- خطاtoast.warning()- هشدارtoast.info()- اطلاعاتtoast.promise()- با promisetoast.loading()- لودینگtoast.custom()- سفارشی
ویژگی‌ها
- انیمیشن‌های نرم
- پشتیبانی از Promise
- قابل بستن با swipe
- تم روشن/تاریک خودکار
- آیکون‌های از پیش تعریف شده
- صف مدیریت شده
- سازگار با RTL