تنبيه مضمّن
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". | |
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" فتُعلن بهدوء. الأيقونة زخرفية؛ والنوع محمول أيضًا في العنوان والنص.
لزر الإغلاق اسم متاح. ضع التنبيه قرب المحتوى الذي يصفه ليكون ترتيب القراءة منطقيًا.