إشعار
Notificationشريط إشعار بعرض كامل في React لرسائل النظام في أعلى الصفحة: أنواع دلالية، وعبارة افتتاحية بارزة، وإجراءات، وزر إغلاق. جاهز للاتجاه العربي.
Notification شريط على مستوى الصفحة لرسائل النظام. حدد type وأضف lead بخط عريض، ومرر onClose لجعله قابلًا للإغلاق.
متى تستخدمه
استخدم Notification للرسائل التي تخصّ الصفحة أو الخدمة كلّها: توقّف مجدول، أو تغيير في سياسة، أو مشكلة في الحساب تعطّل التقدّم. ضعه فوق محتوى الصفحة مرّة واحدة وأبقِ lead في كلمات قليلة.
لرسالة مرتبطة بقسم واحد، استخدم InlineAlert. للتأكيدات التي تتلاشى، استخدم NotificationToast.
أمثلة
الخصائص
الخصائص التي يعرّفها Notification. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
type | "neutral" | "success" | "warning" | "info" | "critical" | ||
childrenإلزامي | react.ReactNode | The message body - always present per SDGA (the one required content). | |
lead | react.ReactNode | Bold lead-in shown before the message, e.g. "Important:". | |
icon | react.ReactNode | Featured leading icon. Pass false to hide it; defaults to the type's glyph. | |
actions | react.ReactNode | Trailing action row - compose <Link tone="neutral"> and/or
<Button variant="black" size="md"> (the exact SDGA action variants). | |
onClose | () => void | Provide to render the trailing ✕ and make the banner dismissible. | |
open | boolean | Controlled visibility. Pair with onClose to own the state yourself. | |
closeLabel | string | Localized close-button label. Defaults to "Dismiss". | |
live | "polite" | "assertive" | Wire the banner into the a11y tree as a live region. polite (role=status)
announces gracefully; assertive (role=alert) interrupts. Omit for static banners. |
إمكانية الوصول
يستخدم الشريط role="alert" لنوعي الخطأ والتحذير وrole="status" للبقية، فيعلنه قارئ الشاشة عند ظهوره. الإجراءات أزرار أو روابط حقيقية ولزر الإغلاق اسم متاح.
أبقِ الشريط في تدفّق المستند ليصادفه مستخدم لوحة المفاتيح قبل المحتوى الذي يؤثّر فيه.