دیالوگ (Dialog)

دیالوگ یک جعبه است که روی صفحه فعلی قرار می‌گیرد و کاربر را مجبور به تعامل می‌کند.

پایه (Basic)

استفاده پایه از دیالوگ.

اندازه (Size)

دیالوگ به ما این امکان را می‌دهد که عرض و ارتفاع را برای تنظیم اندازه دیالوگ وارد کنیم.

غیرفعال کردن بستن با Escape و کلیک روی بک‌دراپ

ما می‌توانیم با تنظیم shouldCloseOnOverlayClick و shouldCloseOnEsc propها، بستن دیالوگ با دکمه Escape و کلیک روی بک‌دراپ را غیرفعال کنیم.

اسکرول داخلی (Internal Scroll)

مثالی از اسکرول داخلی دیالوگ.

قفل کردن اسکرول (Lock Scroll)

ما می‌توانیم با ارسال 'overflow-hidden به bodyOpenClassName، اسکرول پنجره را قفل کنیم.

استایل سفارشی دیالوگ (Custom dialog style)

مثالی از استایل سفارشی دیالوگ.

قابل بستن (Closable)

با تنظیم closeable به false، آیکون بستن دیالوگ مخفی خواهد شد.

API

دیالوگ
ویژگیتوضیحاتنوعپیش‌فرض
widthعرض دیالوگstring | number520
heightارتفاع دیالوگstring | number-
isOpenآیا دیالوگ نمایش داده شودbooleanfalse
styleاستایل برای دیالوگ و پس‌زمینهobject: { content: object, overlay: object }<-
contentClassNameنام کلاس که به محتوای دیالوگ افزوده می‌شودstring-
portalClassNameنام کلاس که به دروازه‌ی دیالوگ افزوده می‌شودstring-
bodyOpenClassNameنام کلاس که به بدنه اضافه می‌شود وقتی دیالوگ باز استstring-
htmlOpenClassNameنام کلاس که به HTML اضافه می‌شود وقتی دیالوگ باز استstring-
overlayClassNameنام کلاس برای پس‌زمینه دیالوگstring-
appElementتنظیم عنصر خارجی به محتوای دیالوگSafeHTMLElement | SafeHTMLCollection | SafeNodeList | SafeHTMLElement[]-
onAfterOpenتابع بازگشتی بعد از باز شدن دیالوگ(overlayElement: HTMLElement, contentElement: HTMLElement) => void-
closableآیا آیکن بستن دیالوگ نمایش داده شودbooleantrue
onCloseتابع بازگشتی بعد از کلیک بر روی آیکن بستن دیالوگ(event: Event) => void-
onRequestCloseتابع بازگشتی بعد از بستن دیالوگ(event: Event) => void-
closeTimeoutMSزمان تاخیر هنگام بستن دیالوگ(event: Event) => void150
shouldFocusAfterRenderآیا دیالوگ باید بعد از رندر فوکوس شودbooleantrue
shouldReturnFocusAfterCloseآیا باید فوکوس را به عنصری که قبلاً فوکوس شده بود بازگرداندbooleantrue
preventScrollآیا باید از preventScroll برای بازگرداندن فوکوس به عنصر قبلی استفاده شودbooleanfalse
shouldCloseOnOverlayClickآیا دیالوگ باید زمانی که پس‌زمینه کلیک شد بسته شودbooleantrue
shouldCloseOnEscآیا دیالوگ باید زمانی که کلید Esc فشرده شد بسته شودbooleantrue
parentSelectorتابعی که برای دریافت عنصر والد برای اتصال دیالوگ به آن فراخوانی خواهد شد() => document.body() => document.body
overlayRefرفرنس پس‌زمینه دیالوگ(node: Node) => void-
contentRefرفرنس محتوای دیالوگ(node: Node) => void-