يفتح Modal حواراً من مشغل، وللحوار رأس، جسم، وتذييل إجراءات. يرث الحوار السمة والاتجاه من المزود.
متى تستخدمه
استخدم Modal لمهمة قصيرة يجب إكمالها أو إلغاؤها قبل العودة إلى الصفحة: تأكيد حذف، إدخال رمز تحقق، أو مراجعة ملخص قبل الإرسال. اجعل الحوار لغرض واحد وبأدوات قليلة.
للتدفقات الثانوية الأطول، استخدم Drawer. للوحة خفيفة مثبتة على أداة، استخدم Popover.
الخصائص
الخصائص التي يعرفها Modal. سمات العنصر الأصلي تمر كما هي.
<Modal>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
children | ReactNode | – | |
open | boolean | – | |
defaultOpen | boolean | – | |
onOpenChange | (open: boolean) => void | – | |
modal | boolean | – | |
<ModalTrigger>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<ModalClose>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
<ModalShortcut>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
titleإلزامي | react.ReactNode | – | Shortcut: renders ModalHeader > ModalTitle, and wraps children in ModalBody. |
description | react.ReactNode | – | Shortcut: a ModalDescription at the top of the body (SDGA supporting text). |
footer | react.ReactNode | – | Shortcut: the actions, rendered in ModalFooter. |
<ModalContent>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
size | "default" | "full" | – | |
centered | boolean | – | |
titleإلزامي | react.ReactNode | – | Shortcut: renders ModalHeader > ModalTitle, and wraps children in ModalBody. |
description | react.ReactNode | – | Shortcut: a ModalDescription at the top of the body (SDGA supporting text). |
footer | react.ReactNode | – | Shortcut: the actions, rendered in ModalFooter. |
showCloseButton | boolean | – | Render the corner X close button. Defaults to true. Set false for
action-forcing dialogs where the user must pick a footer action. |
closeLabel | string | – | Localized label for the close button. Defaults to "Close", or "إغلاق" when the DgaProvider locale is Arabic. |
forceMount | true | – | Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries. |
onOpenAutoFocus | (event: Event) => void | – | Event handler called when auto-focusing on open.
Can be prevented. |
onCloseAutoFocus | (event: Event) => void | – | Event handler called when auto-focusing on close.
Can be prevented. |
deferPointerDownOutside | boolean | – | When true, a 'pointerdown' event outside of the layered element will
wait for the interaction's click event before dispatching, allowing
third-party code to stop propagation of later events and cancel dismissal. |
onEscapeKeyDown | (event: KeyboardEvent) => void | – | Event handler called when the escape key is down.
Can be prevented. |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | – | Event handler called when the a pointerdown event happens outside of the DismissableLayer.
Can be prevented. |
onFocusOutside | (event: FocusOutsideEvent) => void | – | Event handler called when the focus moves outside of the DismissableLayer.
Can be prevented. |
onInteractOutside | (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | – | Event handler called when an interaction happens outside the DismissableLayer.
Specifically, when a pointerdown event happens outside or focus moves outside of it.
Can be prevented. |
asChild | boolean | – | |
<ModalHeader>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | |
icon | react.ReactNode | – | Optional featured icon shown above the title in a 40px SDGA disc. |
<ModalTitle>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | Override the heading element (e.g. render an <h3> instead of the default <h2>). |
<ModalDescription>
| الخاصية | النوع | الافتراضي | الوصف |
|---|
asChild | boolean | – | Override the element (e.g. render a <div> for richer markup). |
إمكانية الوصول
يعتمد Modal على حوار Radix، ويعرض role="dialog" مع aria-modal. يحصر الحوار التركيز ما دام مفتوحاً، ويغلق بمفتاح Escape. عند الإغلاق، يعيد التركيز إلى المشغل. يربط Modal الحوار بـ ModalTitle وModalDescription، ليعلن قارئ الشاشة اسمه وغرضه.
يستخدم زر الإغلاق closeLabel اسماً متاحاً، وترث الطبقة الاتجاه والسمة من المزود.