إشعار منبثق
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. Default "Dismiss". | |
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. |
إمكانية الوصول
تُعلن الإشعارات المنبثقة عبر المنطقة الحيّة لمنفذ العرض، فيسمعها مستخدم قارئ الشاشة دون أن يفقد التركيز. لزر إغلاق كل إشعار اسم متاح، والإجراءات أزرار حقيقية.
لأن الإشعارات عابرة، لا تضع معلومة مطلوبة في إشعار فقط. كرّر النتائج في محتوى الصفحة حيث يجدها المستخدم لاحقًا.