التنبيه

Alert

role="alert"

اسمه كمانألرت، تنبيه مضمّن، شريط تنبيه، بانر، تنويه، صندوق ملاحظة، inline alert، banner، callout، admonition، notice box، message bar

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

لو قلت عليه…

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

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

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

إعدادات الفريق

اشتراك الفريق ينتهي بعد ٣ أيام. جدّده من صفحة الفوترة.

اسم الفريقفريق التصميم

تعذّر حفظ اسم الفريقانقطع الاتصال قبل وصول الطلب. الرمز ERR_502.

تنويه: تغيير الاسم لا يغيّر رابط المساحة.

RTLالحافّة الملوّنة بـ border-inline-start، فتنتقل مع الاتجاه وحدها

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

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

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

ابنِ مكوّن تنبيه داخل الصفحة بثلاث صور: مضمّن بجانب الحقل الذي يخصّه، وشريط في أعلى الصفحة أو أعلى القسم، وتنويه تحريري داخل النصّ. اقصر role="alert" على الأخطاء وعلى ما يوقف المستخدم، واستعمل role="status" في كل رسالة أخرى. لا تطبع أي تنبيه في HTML منذ أوّل رسم فهو لا يُعلَن لأحد، وإن استعملت منطقة aria-live عامّة فاجعلها موجودة فارغة ثم اكتب فيها لاحقاً، لأن المنطقة التي تُنشأ وتُملأ في نفس اللحظة تفوت أغلب قارئات الشاشة. ضع في كل تنبيه أيقونة حالة بـ aria-hidden="true"، وعنواناً يصف ما حدث، ونصّاً يقول الخطوة التالية، وزرّ إجراء واحداً على الأكثر. واجعل الشريط وحده قابلاً للإغلاق بزرّ يحمل aria-label، وخزّن قرار الإغلاق في localStorage أو في تفضيلات الحساب، وانقل التركيز إلى عنصر معلوم بعده. لا تنقل التركيز إلى التنبيه وهو يظهر أثناء كتابة المستخدم، ولا تعتمد على اللون وحده فالكلمة هي التي تحمل المعنى. واستعمل الخصائص المنطقية في كل سطر: border-inline-start للحافّة الملوّنة، و padding-inline-start للحشو المقابل، و inset-inline-end لزرّ الإغلاق المثبّت، و text-align: start للنصّ، ولا تكتب left ولا right ولا margin-left. وإن رسمت الحافّة بـ box-shadow فاضرب الإزاحة في متغيّر اتجاه، فلا صيغة منطقية لهذه الخاصّية. واعزل أسماء الملفّات ورموز الأخطاء اللاتينية داخل النصّ العربي بـ <bdi>، ولا تقلب أيقونات الحالة عند انعكاس الصفحة.

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

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

الحافّة الملوّنة

ينعكس

الخطّ الملوّن الذي يعرّف نوع التنبيه يجلس عند البداية المنطقية، أي عند اليمين في العربية. اكتبه border-inline-start: 3px solid وقابله بـ padding-inline-start، فـ border-left مع padding-left يبقيان في اليسار بعد الانعكاس ويلتصق النصّ بالحافّة اليمنى بلا حشو. ولو رسمت الخطّ بظلّ داخلي فتذكّر أن box-shadow بلا صيغة منطقية أصلاً: القيمة inset 3px 0 0 تزيح الظلّ يميناً فيظهر الشريط على الحافّة الداخلية اليسرى مهما كان اتجاه الصفحة، فاضرب الإزاحة في متغيّر اتجاه بالشكل inset calc(3px * var(--dir)) 0 0 مع ضبط ‎--dir: -1 داخل [dir="rtl"].

صفّ الأيقونة والإغلاق

ينعكس

الأيقونة عند البداية المنطقية، ثم النصّ، ثم زرّ الإغلاق عند النهاية المنطقية. صفّ flex عادي يرتّب نفسه لأن المحور المضمّن يتبع direction، فيكفيك gap مع margin-inline-start: auto على زرّ الإغلاق. وإن كان الزرّ مثبّتاً بالإحداثيات في شريط عريض فاكتب inset-inline-end: 12px لا right: 12px. ولا تضف flex-direction: row-reverse داخل [dir="rtl"] ظنّاً أنك تصحّح الترتيب، فالصفّ انعكس مرّة واحدة أصلاً، والعكس الثاني يجعل الترتيب البصري مخالفاً لترتيب DOM ولمسار Tab.

أيقونات الحالة لا تنقلب

لا ينعكس

مثلّث التحذير، وعلامة التعجّب، وحرف i داخل الدائرة، وعلامة الصح: معناها واحد في الاتجاهين، وإن كُتبت محارف نصّية لا svg فقيمة Bidi_Mirrored فيها No، فلا يقلبها محرّك النصّ هو الآخر. والقاعدة الشاملة [dir="rtl"] svg { transform: scaleX(-1) } تكسر هذه الأيقونات بالذات وتعرضها مقلوبة بلا سبب. أمّا سهم «عرض التفاصيل» داخل التنبيه فهو اتجاهي ويجب أن ينقلب، فاقصر التحويل على صنف تضعه على الأسهم وحدها.

المقاطع اللاتينية داخل الرسالة

لا ينعكس

رسائل الأخطاء مليئة بمقاطع لاتينية: اسم ملفّ، عنوان بريد، رمز مثل ERR_502. وإدخال أيّ منها في جملة عربية يجعل خوارزمية bidi تعيد ترتيب النقطة أو القوسين حوله، فتقفز النقطة إلى أوّل السطر أو ينفصل الرمز عن حدّيه. اعزل كل مقطع بـ <bdi> أو بسمة dir="ltr"، فورقة الأنماط الافتراضية في HTML تعطي الاثنين unicode-bidi: isolate. أمّا صنف CSS يحمل direction: ltr وحده فلا يعزل شيئاً: الاتجاه يضبط قاعدة المقطع، والعزل هو ما يمنع المحارف المحايدة حوله من الانضمام إليه، فأضف unicode-bidi: isolate معه.

الشريط المحقون خارج الشجرة

ينعكس

الشريط العلوي يُحقن كثيراً في نهاية <body> عبر portal، والخصائص المنطقية تُحسب من قيمة direction المحسوبة للعنصر نفسه، وهي قيمة موروثة عبر شجرة DOM لا عبر شجرة React. فإن كانت dir="rtl" موضوعة على <div id="app"> بدلاً من <html>، خرج الشريط من تلك الشجرة وحُسب اتجاهه ltr، فرُسمت border-inline-start على اليسار و inset-inline-end على اليمين رغم أن كل سطر في الأنماط منطقيّ. ضع dir على <html>، أو مرّر dir صراحةً إلى حاوية الـ portal.

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

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

ARIArole="alert" / role="status"الأول assertive مع aria-atomic="true" فيقطع القراءة، والثاني polite فينتظر دوره.

HTML<output>العنصر الأصلي الوحيد الذي يأتي بمنطقة حيّة جاهزة: دوره الضمني status.

shadcn/ui<Alert> + <AlertTitle> + <AlertDescription>يرسم div بـ role="alert" وصيغتين فقط: default و destructive.

Material UI<Alert severity="error">أربع درجات: error و warning و info و success، وجذر المكوّن يحمل role="alert" افتراضياً.

Radix UI<AlertDialog>اسم قريب وعنصر مختلف: نافذة حاجبة تنتظر قراراً، ولا يوجد في Radix عنصر Alert مضمّن.

Ant Design<Alert banner closable />خاصّية banner هي بالضبط الفرق بين الشكلين: نفس المكوّن بشكل الشريط الممتدّ.

CSSborder-inline-startالخاصّية المنطقية التي تنقل الحافّة الملوّنة إلى الجهة الصحيحة وحدها.

شوف كمان

ويبالإشعار العائم ويبالنافذة الحوارية ويبحقل النموذج

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