تنبيه مضمن
InlineAlertتنبيه مضمن في React للرسائل داخل الصفحة: أنواع المعلومة، النجاح، التحذير، والخطأ، مع عنوان، إجراءات، وزر إغلاق. تعلنه التقنيات المساعدة عبر المناطق الحية.
يعرض InlineAlert رسالة بارزة دون أن يغادر المستخدم الصفحة. حدد type بحسب معنى الرسالة، ومرر title. وأضف onClose لجعل التنبيه قابلاً للإغلاق.
متى تستخدمه
استخدم InlineAlert لشرح شيء عن المحتوى المجاور: ملخص أخطاء فوق نموذج، أو إشعار صيانة الخدمة، أو تأكيد نجاح بعد الحفظ. اضبط type ليطابق معنى الرسالة، وأبق النص في جملة أو جملتين.
لرسالة على مستوى الصفحة كلها، استخدم Notification. لتأكيد عابر، استخدم NotificationToast.
أمثلة
الخصائص
الخصائص التي يعرفها InlineAlert. سمات العنصر الأصلي تمر كما هي.
<InlineAlert>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
type | "destructive" | "neutral" | "success" | "warning" | "info" | ||
appearance | "color" | "white" | ||
titleإلزامي | react.ReactNode | Lead text, shown semibold - the alert's headline. | |
icon | react.ReactNode | Featured leading icon. Pass false to hide it. Defaults to the SDGA glyph
for the type (help-circle for neutral/info/destructive, triangle for warning,
check for success). | |
actions | react.ReactNode | Action buttons row - pass InlineAlertActions. On narrow widths they stack
full-width and the first one renders as the filled primary. | |
onClose | () => void | Provide to render the trailing close button and make the alert 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 alert into the a11y tree as a live region. polite (role=status)
announces gracefully; assertive (role=alert) interrupts. Omit for static banners. |
<InlineAlertAction>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | Render as the single child (e.g. a router <Link>) instead of a <button>. |
إمكانية الوصول
تعرض تنبيهات الخطأ والتحذير role="alert"، مما يجعلها تقاطع ما يقرؤه قارئ الشاشة. وتعرض تنبيهات المعلومة والنجاح role="status"، مما يجعل قارئ الشاشة يعلنها دون مقاطعة. الأيقونة زخرفية، ويظهر النوع أيضاً في العنوان والنص.
لزر الإغلاق اسم متاح. ضع التنبيه قرب المحتوى الذي يصفه ليبقى ترتيب القراءة منطقياً.