اعلان (Sonner)
سیستم toast برای نمایش اعلان‌های موقت
انواع Toast
با توضیحات
با دکمه Action
Promise Toast
با دکمه بستن
نصب
ابتدا Toaster را در layout اصلی خود اضافه کنید:
import { Toaster } from '@parto-system-design/ui';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
);
}استفاده
import { toast } from '@parto-system-design/ui';
// 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,
});با دکمه بستن
// در layout
<Toaster closeButton />
// یا برای هر toast خاص
toast('پیام', {
closeButton: true,
});موقعیت
<Toaster position="top-center" />
<Toaster position="top-right" />
<Toaster position="bottom-center" />
<Toaster position="bottom-left" /> {/* پیش‌فرض برای RTL */}با آیکون سفارشی
import { Star } from 'lucide-react';
toast('پیام سفارشی', {
icon: <Star className="size-4" />,
});حذف Toast
const toastId = toast('پیام');
// حذف toast خاص
toast.dismiss(toastId);
// حذف همه
toast.dismiss();Props
Toaster
toast options
انواع
| متد | توضیحات | رنگ پس‌زمینه |
|---|---|---|
toast() | پیام عادی | خاکستری |
toast.success() | موفقیت | سبز |
toast.error() | خطا | قرمز |
toast.warning() | هشدار | نارنجی |
toast.info() | اطلاعات | خاکستری |
toast.promise() | با promise | متغیر |
toast.loading() | لودینگ | خاکستری |
toast.custom() | سفارشی | - |
ویژگی‌ها
- انیمیشن‌های نرم
- پشتیبانی از Promise
- قابل بستن با swipe
- تم روشن/تاریک خودکار
- آیکون‌های از پیش تعریف شده
- صف مدیریت شده
- سازگار با RTL
- رنگ‌بندی مطابق Supabase Design System