البناء · جديد

النافذة الحوارية

توقف سير العمل لتأكيد إجراء أو التنبيه إلى خطر أو جمع مدخل قصير. تظهر فوق طبقة معتمة، ويبقى التركيز داخلها حتى تُغلق.

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/dialog

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

الاستخدام

import { Dialog, DialogActions, DialogClose, DialogContent, DialogHeader, DialogTrigger } from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger render={<Button />}>Send money</DialogTrigger>
  <DialogContent>
    <DialogHeader icon={CheckCircleIcon} title="Transfer sent" description="It usually arrives within a few minutes." />
    <DialogActions>
      <DialogClose render={<Button variant="outline" />}>View receipt</DialogClose>
      <DialogClose render={<Button />}>Done</DialogClose>
    </DialogActions>
  </DialogContent>
</Dialog>

أمثلة

تحذير بتخطيط أفقي

‏layout="horizontal" يضع الأيقونة بجانب النص بعرض 544 بكسل (size="lg")، وlayout="end" يجمع الأزرار في نهاية السطر. للشاشات العريضة والنصوص القصيرة.

تأكيد الحذف

‏AlertDialog لما يحذف أو يزيل: دوره alertdialog، ولا يُغلق بالنقر خارجه، ويبدأ التركيز على «إلغاء». العنوان سؤال محدد، والزر الأحمر يكرر الفعل، ورقم البطاقة يبقى من اليسار إلى اليمين.

مهمة قصيرة في نموذج

يبدأ التركيز في الحقل، وEnter يرسل. وdisablePointerDismissal يمنع إغلاقها بنقرة خارجها فلا يضيع ما كُتب.

محتوى طويل

لا تتجاوز النافذة الشاشة: DialogBody يمرّر محتواه ويبقى العنوان والأزرار في مكانهما. هنا فواصل فوق المحتوى وتحته، ومربع اختيار في بداية صف الأزرار.

قائمة داخل النافذة

القوائم المنسدلة التي تُفتح من داخل النافذة تظهر فوقها، في طبقة popover.

مرجع الخصائص

Dialog / AlertDialog

الخاصية	النوع	الافتراضي	الوصف
`open / defaultOpen / onOpenChange`	`boolean`		للتحكم في الفتح.
`disablePointerDismissal`	`boolean`	`false`	لا تُغلق بالنقر خارجها (للنماذج). في `AlertDialog` دائمًا.

DialogContent

الخاصية	النوع	الافتراضي	الوصف
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"sm"`	العرض: 400 للتأكيد، 480، 544 للأفقي، 640 للنماذج.
`breakpoint`	`"auto" \| "desktop" \| "mobile"`	`"auto"`	خاصية Breakpoint: في الوسط على الحاسوب، وفي الأسفل على الجوال.
`initialFocus / finalFocus`	`RefObject<HTMLElement>`		أين يبدأ التركيز وأين يعود.

DialogHeader

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`		خاصية Title، وهي اسم النافذة.
`description`	`ReactNode`		خاصية Description، وهي وصف النافذة.
`icon`	`IconComponent`		خاصية Featured icon.
`iconColor`	`"success" \| "warning" \| "error" \| "brand" \| "gray"`	`"success"`	لون حامل الأيقونة.
`layout`	`"stacked" \| "centered" \| "horizontal"`	`"stacked"`	خاصية Type للرأس.
`closeButton`	`boolean`	`true`	خاصية X close button.
`closeLabel`	`string`	`"Close"`	اسم زر الإغلاق، بلغة النافذة افتراضيًا.
`divider`	`boolean`	`false`	خاصية Divider.
`pattern`	`boolean`	`true`	الحلقات الزخرفية خلف الأيقونة.

DialogActions

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		الأزرار بترتيب القراءة: الإلغاء ثم التأكيد.
`layout`	`"fill" \| "stacked" \| "end"`	`"fill"`	خاصية Type للأزرار. على الجوال تتكدس كلها والتأكيد في الأعلى.
`start`	`ReactNode`		مربع اختيار أو رابط في بداية الصف (`layout="end"`).
`divider`	`boolean`	`false`	خاصية Divider.

DialogBody / DialogTrigger / DialogClose

الخاصية	النوع	الافتراضي	الوصف
`DialogBody`	`div`		المحتوى بين الرأس والأزرار، ويمرَّر عند الحاجة.
`render`	`ReactElement`		الزر المرئي لـ `DialogTrigger` و`DialogClose`.

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

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

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

المفتاح	ما يفعله
`TabShift+Tab`	بين عناصر النافذة فقط، والصفحة خلفها معطلة.
`Esc`	يغلق النافذة ويعيد التركيز إلى الزر الذي فتحها.
`Enter`	يرسل النموذج داخلها.

ARIA

دورها dialog (أو alertdialog لتأكيد الحذف) مع aria-modal، والعنوان اسمها والوصف وصفها.
يبدأ التركيز في أول حقل، أو على «إلغاء» في تأكيد الحذف، ويعود إلى الزر الذي فتحها.
لزر الإغلاق اسم («إغلاق»). والخطر لا يُعرف باللون الأحمر وحده: العنوان والفعل يقولانه.
تُفتح في 300 ملّي ثانية وتتلاشى فقط مع تقليل الحركة.

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

ينعكس

الأيقونة والنص إلى اليمين، وزر الإغلاق في أعلى اليسار.
الأزرار تنعكس: «إلغاء» على اليمين والتأكيد على اليسار، في نهاية السطر.
النافذة تحمل اتجاه المكان الذي كُتبت فيه ولغته، حتى وهي خارج الشجرة.

لا ينعكس

أيقونات النجاح والتحذير والحذف، والحلقات الزخرفية المتناظرة.

الأرقام: المبالغ تتبع إعداد الأرقام؛ أرقام البطاقات تبقى من اليسار إلى اليمين داخل <bdi dir="ltr">.
الخط العربي: العنوان body-18 Semibold والوصف body-14، والأزرار lg.
النص ثنائي الاتجاه: اكتب العنوان سؤالًا عربيًا محددًا: «إزالة هذه البطاقة؟» لا «هل أنت متأكد؟».

كل المكونات ›