النافذة المنبثقة

طبقة حوار متراكبة تطلب من المستخدم إدخالاً أو تأكيداً.

Loading demo: modal-real-world

التثبيت

npx sdaia-ui@latest add modal

import { Modal } from "@/components/ui/modal"

<Modal />

مربع حوار نافذة سطح المكتب القياسي.

Loading demo: modal-default

استخدم `mobile={true}` للنسخة الجوال ذات الشاشة الكاملة.

Loading demo: modal-mobile

خصائص مكوّن Modal.

Prop	Type	Default	Required
showHeader	boolean	true	optional
divider	boolean	true	optional
showActions	boolean	true	optional
mobile	boolean	false	optional
title	string	-	optional
supportingText	string	-	optional
showSupportingText	boolean	-	optional
headerPlacement	'start' \| 'center' \| 'start-stacked'	'start'	optional
featuredIcon	ReactNode	-	optional
showCloseButton	boolean	true	optional
onClose	() => void	-	optional
actionsType	'hug-start' \| 'hug-center' \| 'hug-end' \| 'fill' \| 'stack'	'hug-start'	optional
primaryLabel	string	-	optional
secondaryLabel	string	-	optional
showSecondary	boolean	-	optional
tertiaryLabel	string	-	optional
showTertiary	boolean	-	optional
onPrimaryClick	() => void	-	optional
onSecondaryClick	() => void	-	optional
onTertiaryClick	() => void	-	optional
children	ReactNode	-	optional
className	string	-	optional