تست (Toast)
تست برای نمایش پیامها بر روی یک پوشش (Overlay) به منظور اطلاعرسانی وضعیت سیستم به کاربران استفاده میشود.
اعلان (Notification)
اعلان با استفاده از تست ظاهر میشود.
نوع اعلان (Notification Type)
نمایش
type اعلان، آیکون و رنگهای متناظر را نشان میدهد. نوع میتواند 'info'، 'warning'، 'error' یا 'success' باشد.آیکون سفارشی (Custom icon)
آیکون در اعلان میتواند با هر عنصر دیگری جایگزین شود.
موقعیت (Placement)
موقعیت تست میتواند در اطراف عنصر فعالکننده به صورتهای مختلف قرار گیرد. ۶ گزینه برای موقعیت موجود است.
قابل بستهشدن (Closable)
با فعال کردن پراپ
closable، آیکون بستن در اعلان نمایش داده میشود.هشدار (Alert)
تست همچنین میتواند با هشدار (Alert) استفاده شود.
مدتزمان (Duration)
تنظیم پراپ
duration برای اعلان مدت زمان باز بودن را مشخص میکند. اگر مقدار duration برابر 0 باشد، تست هرگز بسته نخواهد شد.بستن سفارشی (CustomClose)
toast.push() یک شناسه (UID) برای نمونه اعلان بازگشتی میدهد. میتوان این شناسه را به متد toast.remove(uid) پاس داد تا اعلان مربوطه حذف شود.API
توست (toast)
| متد | توضیحات |
|---|---|
toast.push(message: ReactNode, options?: ToastProps): string | متدی برای نمایش پیام توست، که UID پیام توست فعلی را باز میگرداند |
toast.remove(key: string): void | متدی برای حذف پیام توست خاص با استفاده از کلید متد push |
toast.removeAll(): void | متدی برای حذف تمام پیامهای توست |
ویژگی اعلان (ToastProps)
| پراپ | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| block | آیا توست باید در عرض کامل نمایش داده شود؟ | boolean | false |
| offsetX | افزایش X توست | number | 30 |
| offsetY | افزایش Y توست | number | 30 |
| placement | محل نمایش توست | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'top-end' |
| transitionType | نوع انتقال انیمیشن | 'scale' | 'fade' | 'scale' |
اعلان (Notification)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| closable | نمایش یا عدم نمایش آیکون بستن | boolean | false |
| customIcon | عنصر سفارشی کنار محتوای اعلان | ReactNode | string | - |
| duration | مدت زمان (به ثانیه) قبل از بسته شدن اعلان. اگر مقدار duration برابر 0 باشد، هرگز بسته نخواهد شد. | number | 3000 |
| onClose | کالبک زمانی که اعلان بسته میشود | (e: MouseEvent) => void | - |
| title | عنوان اعلان | string | - |
| type | نوع اعلان | 'info' | 'warning' | 'success' | 'danger' | - |
| width | عرض اعلان | number | string | 350 |