Ecme - The Ultimate Next & TypeScript Web Template

دیالوگ (Dialog)

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

پایه (Basic)

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

اندازه (Size)

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

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

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

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

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

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

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

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

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

قابل بستن (Closable)

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

API

دیالوگ

ویژگی	توضیحات	نوع	پیش‌فرض
width	عرض دیالوگ	`string` \| `number`	`520`
height	ارتفاع دیالوگ	`string` \| `number`	-
isOpen	آیا دیالوگ نمایش داده شود	`boolean`	`false`
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	آیا آیکن بستن دیالوگ نمایش داده شود	`boolean`	`true`
onClose	تابع بازگشتی بعد از کلیک بر روی آیکن بستن دیالوگ	`(event: Event) => void`	-
onRequestClose	تابع بازگشتی بعد از بستن دیالوگ	`(event: Event) => void`	-
closeTimeoutMS	زمان تاخیر هنگام بستن دیالوگ	`(event: Event) => void`	`150`
shouldFocusAfterRender	آیا دیالوگ باید بعد از رندر فوکوس شود	`boolean`	`true`
shouldReturnFocusAfterClose	آیا باید فوکوس را به عنصری که قبلاً فوکوس شده بود بازگرداند	`boolean`	`true`
preventScroll	آیا باید از preventScroll برای بازگرداندن فوکوس به عنصر قبلی استفاده شود	`boolean`	`false`
shouldCloseOnOverlayClick	آیا دیالوگ باید زمانی که پس‌زمینه کلیک شد بسته شود	`boolean`	`true`
shouldCloseOnEsc	آیا دیالوگ باید زمانی که کلید Esc فشرده شد بسته شود	`boolean`	`true`
parentSelector	تابعی که برای دریافت عنصر والد برای اتصال دیالوگ به آن فراخوانی خواهد شد	`() => document.body`	`() => document.body`
overlayRef	رفرنس پس‌زمینه دیالوگ	`(node: Node) => void`	-
contentRef	رفرنس محتوای دیالوگ	`(node: Node) => void`	-

فهرست مطالب

پایه (Basic)
اندازه (Size)
غیرفعال کردن بستن با Escape و کلیک روی بک‌دراپ
اسکرول داخلی (Internal Scroll)
قفل کردن اسکرول (Lock Scroll)
استایل سفارشی دیالوگ (Custom dialog style)
قابل بستن (Closable)

ویژگی

توضیحات

نوع

پیش‌فرض

width

عرض دیالوگ

string | number

520

height

ارتفاع دیالوگ

string | number

isOpen

آیا دیالوگ نمایش داده شود

boolean

false

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

آیا آیکن بستن دیالوگ نمایش داده شود

boolean

true

onClose

تابع بازگشتی بعد از کلیک بر روی آیکن بستن دیالوگ

(event: Event) => void

onRequestClose

تابع بازگشتی بعد از بستن دیالوگ

(event: Event) => void

closeTimeoutMS

زمان تاخیر هنگام بستن دیالوگ

(event: Event) => void

150

shouldFocusAfterRender

آیا دیالوگ باید بعد از رندر فوکوس شود

boolean

true

shouldReturnFocusAfterClose

آیا باید فوکوس را به عنصری که قبلاً فوکوس شده بود بازگرداند

boolean

true

preventScroll

آیا باید از preventScroll برای بازگرداندن فوکوس به عنصر قبلی استفاده شود

boolean

false

shouldCloseOnOverlayClick

آیا دیالوگ باید زمانی که پس‌زمینه کلیک شد بسته شود

boolean

true

shouldCloseOnEsc

آیا دیالوگ باید زمانی که کلید Esc فشرده شد بسته شود

boolean

true

parentSelector

تابعی که برای دریافت عنصر والد برای اتصال دیالوگ به آن فراخوانی خواهد شد

() => document.body

overlayRef

رفرنس پس‌زمینه دیالوگ

(node: Node) => void

contentRef

رفرنس محتوای دیالوگ

(node: Node) => void