الإشعار العائم

Toast

role="status"

اسمه كمانتوست، إشعار مؤقت، رسالة عابرة، سناك بار، تنبيه منبثق، إشعار سريع، snackbar، transient notification، flash message، toast notification، temporary alert

الإشعار العائم رسالة قصيرة تظهر فوق الواجهة بعد إجراء قام به المستخدم، ثم تختفي تلقائياً بعد ثوانٍ قليلة. وله صفتان جوهريتان: أنه عابر (له مؤقّت)، وأنه لا يعترض العمل (لا يسرق التركيز ولا يمنع الضغط على باقي الصفحة). ويشبهه ثلاثة عناصر يختلف عنها: التنبيه المضمّن (inline alert) يجلس داخل تدفّق الصفحة قرب الحقل الذي يخصّه ولا يختفي؛ والشريط العلوي (banner) يمتدّ بعرض الصفحة ويبقى حتى يُغلق يدوياً؛ والنافذة الحوارية (modal) تحجب الصفحة وتفرض قراراً. ولو كانت الرسالة مهمّة لدرجة أن ضياعها يضرّ المستخدم، فهي ليست إشعاراً عائماً.

لو قلت عليه…

«الرسالة اللي بتطلع تحت وبتختفي»«المستطيل بتاع تم الحفظ»«إشعار بيظهر في الركن ثانيتين»«الرسالة الصغيرة اللي فيها زرار تراجع»«البوب أب اللي مش بيوقف الشغل»

العيّنة الحيّة

تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.

ملفّاتي

تم حذف «تقرير-الربع.pdf»

RTLالشريط يفرغ من البداية المنطقية، مرّر المؤشّر ليتوقّف

تشريح العنصر: كل جزء واسمه

مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.

برومبت البناء

ابنِ نظام إشعارات عائمة (toasts). ضع منطقة ثابتة واحدة في الصفحة من البداية تحمل aria-live="polite"، وثبّتها بـ inset-inline-end و inset-block-end حتى تنعكس مع اتجاه الصفحة. كل إشعار عنصر بـ role="status" (استخدم role="alert" للأخطاء فقط). ويحتوي على أيقونة حالة بـ aria-hidden، ونصّ قصير، وإجراء واحد اختياري، وزرّ إغلاق باسم مقروء ومساحة لمس ٤٤ بكسل. أضف شريط مؤقّت يفرغ بـ transform-origin منطقي ويتوقّف عند hover و focus. اجعل حركة الدخول تعتمد على متغيّر اتجاه ‎--dir بدلاً من translateX ثابت. حدّد المدّة تلقائياً من طول النصّ بحدّ أدنى ٤ ثوانٍ. اعرض ثلاثة إشعارات كحدّ أقصى في نفس الوقت واطوِ الباقي في طابور.

سلوكه في الاتجاه من اليمين لليسار

الجزء ده حصري عندنا.

موضع الإشعار

ينعكس

الإشعار المثبّت في الركن السفلي الأيمن في الواجهة الإنجليزية ينتقل إلى الركن السفلي الأيسر في العربية. استخدم inset-inline-end: 1rem بدلاً من right: 1rem، وإلا بقي في الجهة الخطأ بعد الانعكاس.

حركة الدخول

ينعكس

الانزلاق من الحافّة يجب أن يتبع الاتجاه المنطقي. أما translateX(100%) الثابت فيجعل الإشعار يدخل من الجهة المعاكسة ويعبر الشاشة كلها. استخدم translateX(calc(100% * var(--dir))) مع ضبط ‎--dir بـ ‎-1 داخل [dir="rtl"].

شريط المؤقّت

ينعكس

الشريط يفرغ من البداية المنطقية إلى النهاية المنطقية. أما transform-origin: left فيجعله يفرغ عكس اتجاه القراءة في العربية، لذلك استخدم transform-origin: inline-start أو اعكسها ضمن [dir="rtl"].

أيقونة التراجع

ينعكس

سهم التراجع ↩ أيقونة اتجاهية تنعكس مع الصفحة. في المقابل لا تنعكس أبداً أيقونات الحالة (صح، خطأ، تحذير) ولا الساعة ولا رمز التحميل الدوّار، فعكسها يجعلها تبدو مكسورة.

مدّة العرض

لا ينعكس

هذه ملاحظة محتوى لا ملاحظة تخطيط. النصّ العربي لنفس الرسالة غالباً أطول من الإنجليزي بنحو ٢٠٪ في عدد المحارف، ومدّة ٣ ثوانٍ مضبوطة على الإنجليزية قد لا تكفي لقراءة النسخة العربية. اربط المدّة بطول النصّ بدل رقم ثابت.

أسماؤه في الكود

كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.

ARIArole="status" / aria-live="polite"إعلان هادئ ينتظر دوره، وهو الافتراضي الصحيح للإشعارات.

Radix UI<Toast.Provider> + <Toast.Viewport>أجزاء مركّبة: Toast.Root و Toast.Title و Toast.Action و Toast.Close.

shadcn/uitoast() / <Toaster />واجهة أمر واحد مبنية فوق Sonner؛ الطابور والتكديس مضبوطان مسبقاً.

Material UI<Snackbar autoHideDuration={4000}>ماتيريال تسمّيه Snackbar لا Toast: نفس الشيء باسم مختلف.

Ant Designmessage.success() / notification.open()message سطر واحد في الأعلى، notification بطاقة أكبر في الركن.

CSSinset-inline-endالخاصية المنطقية التي تجعل الموضع ينعكس وحده مع اتجاه الصفحة.

شوف كمان

ويبمسار التنقّل ويبمؤشّر الخطوات

آخر تحديث · 2026-08-19