إشعار منبثق
NotificationToastإشعارات منبثقة في React تظهر عند استدعاء دالة toast(): أنماط، إجراءات مثل التراجع، تحديث في المكان، ومنفذ عرض واحد قرب جذر التطبيق.
استدع toast(message, options) أو toast.success(...) من أي مكان في التطبيق. ضع حاوية <NotificationToast /> مرة واحدة قرب جذر التطبيق.
متى تستخدمه
استخدم NotificationToast للتأكيدات القصيرة التي لا تحتاج رداً: "تم إرسال الطلب"، "تم النسخ"، "تم الحفظ". استدع toast() أو toast.success() من معالجات الأحداث، وضع <NotificationToast /> واحداً قرب الجذر.
أضف إجراء تراجع للعمليات القابلة للعكس. للرسائل التي يجب أن يقرأها المستخدم أو يتصرف بناءً عليها، استخدم InlineAlert أو Notification لأنهما يبقيان ظاهرين.
أمثلة
الخصائص
الخصائص التي يعرفها NotificationToast. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
position | ToastPosition | Where toasts stack. Logical: start/end flip in RTL. Default bottom-end. | |
containerized | boolean | Pin the viewport to a positioned ancestor (via position: absolute)
instead of the browser viewport (position: fixed). Set this for
Storybook stories, embedded widgets, and any layout where the NotificationToast
should stay within a parent box. Caller is responsible for placing the
NotificationToast inside an element with position: relative (or other positioned
containing block). | |
duration | number | ms; default 4000. Set 0 (or Infinity) to disable auto-dismiss globally. | |
closeButton | boolean | Show a close (X) button on each toast. Defaults to true. | |
closeLabel | string | Localized label for the close button. Defaults to "Dismiss", or "إغلاق" when the DgaProvider locale is Arabic. | |
hideIcon | boolean | Hide the default leading icon per variant. | |
className | string | Extra class on the Radix Viewport. | |
swipeDirection | "right" | "left" | "up" | "down" | Override swipe direction. Defaults based on position. | |
store | ToastStore | The toast store this NotificationToast subscribes to. Defaults to the module-level
singleton so the bare toast() API works without setup. Pass an isolated
store (created via createToastStore() + createToast(store)) when you
need multiple independent NotificationToasts on the same page - common in
Storybook, docs sites, and embedded widgets. |
إمكانية الوصول
يعلن قارئ الشاشة كل إشعار منبثق عبر المنطقة الحية لمنفذ العرض، ويبقى التركيز في مكانه. لزر إغلاق كل إشعار اسم متاح، والإجراءات أزرار حقيقية.
لأن الإشعارات المنبثقة عابرة، لا تضع معلومة مطلوبة في إشعار منبثق وحده. كرر النتائج في محتوى الصفحة حيث يجدها المستخدم لاحقاً.