البناء · جديد

التنبيه

رسالة داخل الصفحة بجانب ما تخصه، تبقى حتى يتغير الوضع أو يخفيها الشخص: دفعة فشلت، هوية توشك أن تنتهي، استيراد اكتمل.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/alert

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { Alert } from "@/components/ui/alert";

<Alert type="warning" title="Your ID expires on 12 October" action={{ label: "Upload ID", href: "/id" }}>
  Upload a new ID before then to keep sending money.
</Alert>

أمثلة

الأنواع ودرجات الظهور

النوع يقول ما الرسالة، والدرجة تقول مدى ارتفاع صوتها: الفاتح لمعظم التنبيهات، والهادئ ليلاحظه الناس، والقوي للمشكلة الحرجة الوحيدة في الصفحة.

قابل للإخفاء

‏dismissible للتنبيهات التي تُعلم فقط. عند الإخفاء ينتقل التركيز إلى العنصر التالي. وتذكّر الإخفاء على التطبيق (onDismiss).

ملخص أخطاء النموذج

بعد إرسال فاشل يظهر تنبيه خطأ فوق النموذج (announce="alert") وينتقل التركيز إليه، وروابطه تؤدي إلى الحقول. أرسل النموذج فارغًا لتراه.

مرجع الخصائص

Alert

الخاصية	النوع	الافتراضي	الوصف
`type`	`"information" \| "success" \| "warning" \| "error"`	`"information"`	خاصية Type.
`emphasis`	`"light" \| "subtle" \| "intense"`	`"light"`	خاصية Emphasis.
`title`	`ReactNode`		خاصية Title: ما حدث.
`children`	`ReactNode`		خاصية Message: ما يمكن فعله.
`icon`	`IconComponent \| null`		خاصية Show leading icon؛ أيقونة لكل نوع افتراضيًا.
`action / link`	`{ label; href?; render?; onClick? }`		خاصيتا Show Button وShow link.
`announce`	`"status" \| "alert"`		للتنبيهات التي تظهر بعد حدث؛ `alert` للأخطاء العاجلة فقط.
`dismissible / dismissLabel / onDismiss`	`boolean / string / () => void`		خاصية Show dismiss، واسم الزر، وما يحدث عند الإخفاء.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى الإجراء والرابط وزر الإخفاء؛ بعد الإخفاء ينتقل التركيز إلى العنصر التالي.

ARIA

التنبيه الموجود عند تحميل الصفحة جزء منها؛ والذي يظهر بعد حدث يأخذ status، والخطأ العاجل alert.
اللون لا يعمل وحده: الأيقونة والعنوان يقولان النوع.
لزر الإخفاء اسم («إخفاء»).

ملاحظات العربية والاتجاه

ينعكس

الأيقونة والعنوان والرسالة على اليمين، وزر الإخفاء على اليسار، والإجراءات تبدأ من اليمين.

لا ينعكس

أيقونات المعلومات والنجاح والتحذير والخطأ لا تنعكس.

الأرقام: التواريخ والمبالغ والأرقام التعريفية تُقرأ من اليسار إلى اليمين داخل <bdi dir="ltr">.
الخط العربي: العنوان body-14 Semibold والرسالة body-14، والارتفاع حد أدنى.
النص ثنائي الاتجاه: اكتب العنوان والرسالة بالعربية مباشرة، لا ترجمة حرفية.

كل المكونات ›