مربع حوار Dialog

يُبلغ المستخدم ويحمل العمليات ذات الصلة مع الحفاظ على حالة الصفحة الحالية.

الاستخدام الأساسي

مربع حوار مُتحكم به

import { useState } from 'react'
import { LhButton, LhDialog } from '@lh-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <LhButton type="primary" onClick={() => setOpen(true)}>
        فتح مربع الحوار
      </LhButton>
      <LhDialog
        open={open}
        title="تنبيه"
        width="420px"
        footer={
          <>
            <LhButton onClick={() => setOpen(false)}>إلغاء</LhButton>
            <LhButton type="primary" onClick={() => setOpen(false)}>تأكيد</LhButton>
          </>
        }
        onClose={() => setOpen(false)}
      >
        <p>هذا مربع حوار مُتحكم به.</p>
      </LhDialog>
    </>
  )
}

خصائص Dialog

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
open	هل يكون مفتوحًا (مُتحكم به بحتة)	boolean	—	false
title	العنوان (يعمل كقيمة احتياطية لـ aria-label عند عدم وجود header)	string	—	—
width	العرض	string | number	—	—
fullscreen	ملء الشاشة	boolean	—	false
showClose	إظهار زر الإغلاق	boolean	—	true
closeOnClickModal	الإغلاق عند النقر على القناع	boolean	—	true
closeOnPressEscape	الإغلاق بالضغط على Esc	boolean	—	true
draggable	قابل للسحب (سحب شريط العنوان)	boolean	—	false
center	توسيط العنوان والتذييل	boolean	—	false
position	إزاحة تموضع مخصصة	{ top?: string; left?: string }	—	—
lockScroll	قفل تمرير body عند الفتح	boolean	—	true
beforeClose	اعتراض ما قبل الإغلاق (إرجاع false / Promise<false> يعني عدم الإغلاق)	() => boolean | Promise<boolean>	—	—
top	المسافة من الأعلى	string	—	—
zIndex	مستوى الطبقة (يُخصص افتراضيًا بشكل متزايد عبر useLhZIndex)	number	—	—
header	رأس مخصص (يتجاوز title)	ReactNode	—	—
footer	تذييل مخصص	ReactNode	—	—
themeVars	متغيرات السمة على مستوى المكوّن	Record<string, string>	—	—
sx	خصائص التخطيط السريع	SxProps	—	—

أحداث Dialog

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onClose	طلب إغلاق (يُطلق من القناع / Esc / زر الإغلاق، ولا يُستدعى بعد اعتراض beforeClose)	() => void	update:modelValue
onOpen	يُطلق لحظة الفتح (بعد تركيب DOM)	() => void	@open
onOpened	يُطلق بعد انتهاء حركة الفتح	() => void	@opened
onCloseStart	يُطلق عند بدء حركة الإغلاق	() => void	@close
onClosed	يُطلق بعد انتهاء حركة الإغلاق (بعد إلغاء تركيب DOM)	() => void	@closed

ref

forwardRef<HTMLDivElement>. لا يحتوي LhDialogInstance حاليًا على أي دوال حتمية.

دلالة التحكم البحت

على خلاف plus، لا يحتوي Dialog في هذه المكتبة على حالة وسيطة isVisible داخلية: تُحمل قيمة open بالكامل من قبل الحالة الخارجية، وأي مسار إغلاق يستدعي onClose فقط. راجع دليل الترحيل.

تعدد الطبقات المنبثقة و Esc

يحافظ useLhOverlayStack على رصة ترتيب الفتح، فلا يغلق Esc إلا الطبقة المنبثقة العليا، تجنبًا لإغلاق كل الطبقات بضغطة واحدة.

الأنماط

import '@lh-ui/react/style/dialog'