Inline Alert
رسالة داخل الصفحة بجانب ما تخصه. خمسة أنواع على تعبئة بيضاء أو مظللة وعنوان ونص وإجراءان على الأكثر وزر إغلاق.
الإصدار 0.4.1 ·
التثبيت
bunx --bun shadcn@latest add @dga/inline-alertالاستخدام
import { Button } from "@/components/ui/button";
import { InlineAlert } from "@/components/ui/inline-alert";
export function DocumentsNeeded() {
return (
<InlineAlert
variant="info"
title="مستندات مطلوبة"
actions={<Button size="sm">إرفاق مستند</Button>}
>
أرفق عقد الإيجار قبل التقديم.
</InlineAlert>
);
}استخدم Inline Alert لرسالة تنتمي إلى مكان واحد: نموذج فيه مشكلة أو بطاقة تحتاج خطوة أو قسم فيه تنبيه. وهو جزء من الصفحة، فلا يتحرك ولا يختفي وحده. وللصفحة كلها استخدم Notification؛ وللحدث الذي وقع للتو استخدم Toast. أعطه title قصيرًا وجملة أو جملتين من النص وactions اثنين على الأكثر: الرئيس أولًا. ويلوّن tinted التعبئة والنص بلون النوع؛ والافتراضي بطاقة بيضاء بشريط ملون.
البنية
- التنبيه (
role="status"أوrole="alert"لـwarningوdestructive): انحناء radius-md وحد 1px وحشوة 16 في 24px. - الشريط: 8px في جهة البداية، بلون النوع (الدرجة 400).
- الأيقونة والعنوان والنص.
- الإجراءات تحت النص (اثنان على الأكثر) وزر الإغلاق في جهة النهاية.
أمثلة
أبيض ومظلل
الأنواع الخمسة على تعبئة بيضاء (يسارًا) وtinted (يمينًا). ويمكن تجاهل تنبيهي المعلومة والتنبيه؛ وللنجاح والمدمّر إجراءات.
دون أيقونة ومُغلق
تزيل hideIcon أيقونة الحالة: ويبقى الشريط والعنوان حاملين للنوع. ويُعلَن التنبيه المدمّر أو التحذيري فورًا. وبعد إغلاقه تُستدعى onDismiss ولا يُعرض شيء مكانه.
RTL
الشريط والأيقونة على اليمين، وزر الإغلاق على اليسار، وتبدأ الإجراءات من اليمين. وعرض التنبيه بعرض حاويته.
إمكانية الوصول
| المفتاح | الإجراء |
|---|---|
| Tab | ينقل التركيز عبر الإجراءات ثم إلى زر الإغلاق. |
| Enter | يضغط الزر أو الرابط المركَّز. |
| Space | يضغط الزر المركَّز. |
- منطقة حية: لـ
destructiveوwarningالدورrole="alert"وتقاطع؛ وغيرهماrole="status". ولا يتحرك التركيز. أضفه عند انطباقه ليُعلَن. - يظهر النوع من الأيقونة والعنوان لا من لون الشريط وحده. والعنوان والنص بنسبة 4.5:1 والأيقونات 3:1 أو أفضل على التعبئتين البيضاء والمظللة، فاتحًا وداكنًا.
- لزر الإغلاق اسم (
dismissLabel) وحد تركيز بسمك 2px.
مرجع API
InlineAlert
رسالة داخل الصفحة بجانب ما تخصه (في DGA: Inline Alert): نموذج أو بطاقة أو قسم. يحمل النوعَ شريط ملون في جهة البداية مع أيقونة، فلا يكون اللون الإشارة الوحيدة. تُعلَن `destructive` و`warning` فورًا (`role="alert"`) وغيرهما بأدب (`role="status"`). أضفها عند انطباقها لتُعلَن.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"neutral" | "destructive" | "warning" | "success" | "info"النوع: `neutral` أو `info` أو `success` أو `warning` أو `destructive`. | "neutral" | |
| ||
booleanتعبئة ونص بلون النوع بدل الأبيض. | false | |
| ||
string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>العنوان القصير للتنبيه. | لا توجد قيمة افتراضية | |
| ||
booleanيخفي أيقونة الحالة. | لا توجد قيمة افتراضية | |
| ||
string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>أزرار أو روابط تحت النص (اثنان على الأكثر). | لا توجد قيمة افتراضية | |
| ||
() => voidتُستدعى بعد إغلاق التنبيه. | لا توجد قيمة افتراضية | |
| ||
booleanيعرض زر الإغلاق. يخفي التنبيه نفسه ثم يستدعي `onDismiss`. | لا توجد قيمة افتراضية | |
| ||
stringالاسم الذي يقرؤه قارئ الشاشة لزر الإغلاق. ترجمه في الصفحات العربية. | "Dismiss" | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
الاختلافات عن DGA
- الشريط المحايد هو
border-neutral-primary؛ بينما ترسمه DGA أبيض على تنبيه أبيض فلا يُرى. - في Figma يستبدل تنبيها المعلومة والتنبيه المظللان اللذان فيهما زر إغلاق أيقونة النوع بأيقونة عادية. أما هنا فالأيقونة دائمًا أيقونة النوع، فلا يغيّر إضافة زر الإغلاق شيئًا آخر.
| التغيير | السبب |
|---|---|
Inline Alert: icon colour and neutral bar | The icon should not change when a close button is added, and a white bar on a white alert is not there. |
عرض جميع الاختلافات (1) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
114 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 37 حالةإخفاء
| النمط / الحالة | الفاتح | الداكن |
|---|---|---|
| neutral / title | 14.53:1 AAA | 14.42:1 AAA |
| neutral / text | 10.17:1 AAA | 10.95:1 AAA |
| neutral / icon | 18.09:1 3:1 | 14.42:1 3:1 |
| info / title | 14.53:1 AAA | 14.42:1 AAA |
| info / text | 10.17:1 AAA | 10.95:1 AAA |
| info / icon | 5.98:1 3:1 | 8.98:1 3:1 |
| success / title | 14.53:1 AAA | 14.42:1 AAA |
| success / text | 10.17:1 AAA | 10.95:1 AAA |
| success / icon | 5.69:1 3:1 | 9.82:1 3:1 |
| warning / title | 14.53:1 AAA | 14.42:1 AAA |
| warning / text | 10.17:1 AAA | 10.95:1 AAA |
| warning / icon | 5.42:1 3:1 | 10.27:1 3:1 |
| error / title | 14.53:1 AAA | 14.42:1 AAA |
| error / text | 10.17:1 AAA | 10.95:1 AAA |
| error / icon | 6.57:1 3:1 | 8.18:1 3:1 |
| neutral tinted / text | 14.17:1 AAA | 15.87:1 AAA |
| neutral tinted / icon | 17.64:1 3:1 | 15.87:1 3:1 |
| neutral tinted / close icon | 17.64:1 3:1 | 15.87:1 3:1 |
| neutral tinted / focus ring | 17.64:1 3:1 | 17.49:1 3:1 |
| info tinted / text | 5.70:1 AA | 9.30:1 AAA |
| info tinted / icon | 5.70:1 3:1 | 9.30:1 3:1 |
| info tinted / close icon | 17.23:1 3:1 | 14.93:1 3:1 |
| info tinted / focus ring | 17.23:1 3:1 | 16.45:1 3:1 |
| success tinted / text | 5.54:1 AA | 10.01:1 AAA |
| success tinted / icon | 5.54:1 3:1 | 10.01:1 3:1 |
| success tinted / close icon | 17.63:1 3:1 | 14.71:1 3:1 |
| success tinted / focus ring | 17.63:1 3:1 | 16.20:1 3:1 |
| warning tinted / text | 5.29:1 AA | 10.71:1 AAA |
| warning tinted / icon | 5.29:1 3:1 | 10.71:1 3:1 |
| warning tinted / close icon | 17.66:1 3:1 | 15.03:1 3:1 |
| warning tinted / focus ring | 17.66:1 3:1 | 16.56:1 3:1 |
| destructive tinted / text | 6.39:1 AA | 8.59:1 AAA |
| destructive tinted / icon | 6.39:1 3:1 | 8.59:1 3:1 |
| destructive tinted / close icon | 17.60:1 3:1 | 15.14:1 3:1 |
| destructive tinted / focus ring | 17.60:1 3:1 | 16.68:1 3:1 |
| close icon | 18.09:1 3:1 | 14.42:1 3:1 |
| focus ring | 18.09:1 3:1 | 15.89:1 3:1 |
يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل