Dialog

التثبيتنسخ رابط العنوان

الاستخدامنسخ رابط العنوان

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function CancelRequest() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>إلغاء الطلب</DialogTrigger>
      <DialogContent closeLabel="إغلاق">
        <DialogHeader>
          <DialogTitle>إلغاء هذا الطلب؟</DialogTitle>
          <DialogDescription>سيُسحب الطلب ٢٤٨١٠. يمكنك تقديمه مرة أخرى لاحقًا.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>الإبقاء على الطلب</DialogClose>
          <DialogClose render={<Button destructive />}>إلغاء الطلب</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

استخدم Dialog حين يجب على الشخص أن يجيب أو ينهي أمرًا قبل المتابعة: تأكيد إجراء مدمّر أو تعديل بضعة حقول أو قراءة شروط. ولا تستخدمه لرسالة لا تحتاج إجابة (استخدم Toast أو Inline Alert) ولا لصفحة طويلة من المحتوى. أعطه دائمًا DialogTitle، فهو يسمّي النافذة لقارئ الشاشة. وضع الإجراء الرئيس أخيرًا، وسمِّ الإجراءات بما تفعله («إلغاء الطلب») لا «نعم» و«لا». وcloseLabel هو الاسم الذي يقرؤه قارئ الشاشة لزر الإغلاق؛ ترجمه في الصفحات العربية.

البنيةنسخ رابط العنوان

• الخلفية: تعتّم الصفحة وتعطّلها.
• المحتوى (role="dialog"): البطاقة. عرضها 600px افتراضيًا، وارتفاعها بقدر الشاشة على الأكثر، وتُمرَّر من الداخل.
• الترويسة: DialogTitle وDialogDescription.
• الجسم (اختياري): DialogBody للحقول أو النص.
• التذييل: الإجراءات، محاذاة إلى النهاية. ويغلق DialogClose النافذة.
• زر الإغلاق: في الزاوية، في جهة النهاية.

أمثلةنسخ رابط العنوان

الأحجامنسخ رابط العنوان

قيمة size إما sm (‏400px) أو md (‏600px، عرض DGA) أو lg (‏800px). وكلها تتقلص لتناسب الجوال.

مع نموذجنسخ رابط العنوان

ضع الحقول في DialogBody. وتُمرَّر النافذة إن زاد طولها على الشاشة. ويُسمّى Field داخلها ويُربط كالمعتاد.

يجب الرد عليهنسخ رابط العنوان

اضبط disablePointerDismissal على Dialog لقرار لا يمكن تخطيه: لا يغلق النقر خارج النافذة النافذةَ بعد الآن، ويظل Escape يغلقها. اقرنه بـ showCloseButton={false} فلا يبقى للخروج إلا الإجراءات في التذييل.

مُدارنسخ رابط العنوان

مرّر open وonOpenChange لتملك الحالة: افتح النافذة من شيفرتك، وأغلقها حين ينتهي الطلب. الزر المشغّل اختياري.

RTLنسخ رابط العنوان

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

إمكانية الوصولنسخ رابط العنوان

• مبنية على Base UI Dialog: role="dialog" وaria-modal وaria-labelledby ‏(DialogTitle) وaria-describedby ‏(DialogDescription).
• ينتقل التركيز إلى النافذة عند فتحها ويُحبس فيها ويعود إلى الزر عند إغلاقها. والصفحة خلفها معطّلة وتمريرها مقفل.
• اضبط disablePointerDismissal على Dialog لقرار لا بد من الإجابة عنه، فلا يغلقها النقر خارجها. ويبقى Escape يغلقها.
• لزر الإغلاق اسم (closeLabel). والعناوين والنصوص بنسبة 4.5:1 والأيقونات 3:1 أو أفضل، فاتحًا وداكنًا.
• تظهر النافذة بالتلاشي والتكبير؛ ومع تقليل الحركة تظهر دون حركة.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• يرسم ملف Figma بطاقة بعرض 600px فقط. وأُضيف زر الإغلاق وحبس التركيز ومفتاح Escape وعرضا sm وlg.
• الخلفية alpha-black-50. وعلى الجوال عرض البطاقة 100% مطروحًا منه 16px من حشوة الصفحة.

التبايننسخ رابط العنوان