Ecme - The Ultimate Next & TypeScript Web Template

Dialog

Dialog is a box that overlay on the current page which force user interact with.

Basic

Basic usage of Dialog.

Size

Dialog allow us to input width & height to adjust the size of Dialog.

Disable Escape & backdrop click

We can disable escape key & backdrop click close by setting shouldCloseOnOverlayClick & shouldCloseOnEsc props.

Internal Scroll

Example of Dialog internal scroll.

Lock Scroll

We can lock window scroll by passing 'overflow-hidden to bodyOpenClassName

Custom dialog style

Example of Dialog custom style

Closable

Set closeable to false will hide Dialog close icon.

API

Dialog

Prop	Description	Type	Default
width	Dialog width	`string` \| `number`	`520`
height	Dialog height	`string` \| `number`	-
isOpen	Whether to display dialog	`boolean`	`false`
style	Style for dialog & backdrop	`object: { content: object, overlay: object }`	<-
contentClassName	Class name that append to Dialog content	`string`	-
portalClassName	Class name that append to Dialog portal	`string`	-
bodyOpenClassName	Class name that append to body while Dialog is open	`string`	-
htmlOpenClassName	Class name that append to html while Dialog is open	`string`	-
overlayClassName	Class name for Dialog backdrop	`string`	-
appElement	Setting external node to Dialog content	`SafeHTMLElement` \| `SafeHTMLCollection` \| `SafeNodeList` \| `SafeHTMLElement[]`	-
onAfterOpen	Callback function after Dialog open	`(overlayElement: HTMLElement, contentElement: HTMLElement) => void`	-
closable	Whether show Dialog close icon	`boolean`	`true`
onClose	Callback function after click on Dialog close icon	`(event: Event) => void`	-
onRequestClose	Callback function after Dialog close	`(event: Event) => void`	-
closeTimeoutMS	Timeout speed during Dialog close	`(event: Event) => void`	`150`
shouldFocusAfterRender	Boolean indicating if the dialog should be focused after render	`boolean`	`true`
shouldReturnFocusAfterClose	Boolean indicating if the dialog should restore focus to the element that had focus prior to its display	`boolean`	`true`
preventScroll	Boolean indicating if the dialog should use the preventScroll flag when restoring focus to the element that had focus prior to its display	`boolean`	`false`
shouldCloseOnOverlayClick	Whether to close Dialog when the backdrop is clicked	`boolean`	`true`
shouldCloseOnEsc	Whether to close Dialog when esc key pressed	`boolean`	`true`
parentSelector	Function that will be called to get the parent element that the dialog will be attached to	`() => document.body`	`() => document.body`
overlayRef	Dialog backdrop ref	`(node: Node) => void`	-
contentRef	Dialog content ref	`(node: Node) => void`	-

Prop

Description

Type

Default

width

Dialog width

string | number

520

height

Dialog height

string | number

isOpen

Whether to display dialog

boolean

false

style

Style for dialog & backdrop

object: { content: object, overlay: object }

contentClassName

Class name that append to Dialog content

string

portalClassName

Class name that append to Dialog portal

string

bodyOpenClassName

Class name that append to body while Dialog is open

string

htmlOpenClassName

Class name that append to html while Dialog is open

string

overlayClassName

Class name for Dialog backdrop

string

appElement

Setting external node to Dialog content

SafeHTMLElement | SafeHTMLCollection | SafeNodeList | SafeHTMLElement[]

onAfterOpen

Callback function after Dialog open

(overlayElement: HTMLElement, contentElement: HTMLElement) => void

closable

Whether show Dialog close icon

boolean

true

onClose

Callback function after click on Dialog close icon

(event: Event) => void

onRequestClose

Callback function after Dialog close

(event: Event) => void

closeTimeoutMS

Timeout speed during Dialog close

(event: Event) => void

150

shouldFocusAfterRender

Boolean indicating if the dialog should be focused after render

boolean

true

shouldReturnFocusAfterClose

Boolean indicating if the dialog should restore focus to the element that had focus prior to its display

boolean

true

preventScroll

Boolean indicating if the dialog should use the preventScroll flag when restoring focus to the element that had focus prior to its display

boolean

false

shouldCloseOnOverlayClick

Whether to close Dialog when the backdrop is clicked

boolean

true

shouldCloseOnEsc

Whether to close Dialog when esc key pressed

boolean

true

parentSelector

Function that will be called to get the parent element that the dialog will be attached to

() => document.body

overlayRef

Dialog backdrop ref

(node: Node) => void

contentRef

Dialog content ref

(node: Node) => void