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 bodyOpenClassNameCustom 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 | - |