إشعار
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", or "إغلاق" when the DgaProvider locale is Arabic. | |
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" لبقية الأنواع. لذلك يعلنه قارئ الشاشة عند ظهوره. الإجراءات أزرار أو روابط حقيقية، ولزر الإغلاق اسم متاح.
أبق الشريط في تدفق المستند ليصادفه مستخدم لوحة المفاتيح قبل المحتوى الذي يؤثر فيه.