Drawer
Drawer is a panel that slides out from the edge of the screen which containing supplementary content.
Basic
Basic usage of Drawer
Placement
Set the
placement prop to 'top', 'right', 'bottom', or 'left' to arrange where the Drawer slide out from.Width & Height
We can adjust Drawer via with
height & width prop.Custom Style
Drawer allow us to set extra class via
headerClass, bodyClass & footerClassClosable
Set
closeable to false will hide Drawer close icon.API
Drawer
| Prop | Description | Type | Default |
|---|---|---|---|
| placement | Drawer placement | 'top' | 'right' | 'bottom' | 'left' | 'right' |
| width | Drawer width, (only available when placement is 'left' or 'right' | string | number | 400 |
| height | Drawer height, (only available when placement is 'top' or 'bottom' | string | number | 400 |
| title | Title of Drawer | string | ReactNode | - |
| footer | Footer of Drawer | string | ReactNode | - |
| headerClass | Extra class for Drawer header (! modifier recommended for tailwind css overiding) | string | - |
| bodyClass | Extra class for Drawer body (! modifier recommended for tailwind css overiding) | string | - |
| footerClass | Extra class for Drawer footer (! modifier recommended for tailwind css overiding) | string | - |
| showBackdrop | Whether the display Drawer backdrop | boolean | true |
| lockScroll | Whether to disable window scrolling when Drawer is open | boolean | true |
| isOpen | Whether to display Drawer | boolean | false |
| style | Style for Drawer & backdrop | object: { content: object, overlay: object } | - |
| portalClassName | Class name that append to Drawer portal | string | - |
| bodyOpenClassName | Class name that append to body while Drawer is open | string | - |
| htmlOpenClassName | Class name that append to html while Drawer is open | string | - |
| overlayClassName | Class name for Drawer backdrop | string | - |
| appElement | Setting external node to Drawer content | SafeHTMLElement | SafeHTMLCollection | SafeNodeList | SafeHTMLElement[] | - |
| onAfterOpen | Callback function after Drawer open | (overlayElement: HTMLElement, contentElement: HTMLElement) => void | - |
| closable | Whether show Drawer close icon | boolean | true |
| onClose | Callback function after click on Drawer close icon | (event: Event) => void | - |
| onRequestClose | Callback function after Drawer close | (event: Event) => void | - |
| closeTimeoutMS | Timeout speed during Drawer close | (event: Event) => void | 300 |
| shouldFocusAfterRender | Boolean indicating if the Drawer should be focused after render | boolean | true |
| shouldReturnFocusAfterClose | Boolean indicating if the Drawer should restore focus to the element that had focus prior to its display | boolean | true |
| preventScroll | Boolean indicating if the Drawer should use the preventScroll flag when restoring focus to the element that had focus prior to its display | boolean | false |
| shouldCloseOnOverlayClick | Whether to close Drawer when the backdrop is clicked | boolean | true |
| shouldCloseOnEsc | Whether to close Drawer when esc key pressed | boolean | true |
| parentSelector | Function that will be called to get the parent element that the Drawer will be attached to | () => document.body | () => document.body |
| overlayRef | Drawer backdrop ref | (node: Node) => void | - |
| contentRef | Drawer content ref | (node: Node) => void | - |