Search
Drawer
A panel which slides in from the edge of the screen.
When to use
Divide sections of article.
Divide inline texA Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
Use a Form to create or edit a set of information.
Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
When the same Form is needed in multiple places.t and links such as the operation column of table.
Divide inline texA Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
Use a Form to create or edit a set of information.
Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
When the same Form is needed in multiple places.t and links such as the operation column of table.
Basic
Basic drawer.
Custom Placement
The Drawer can appear from any edge of the screen.
Render in current dom
Render in current dom. custom container, check getContainer.
Submit form in drawer
Use a form in Drawer with a submit button.
Multi-level drawer
Open a new drawer on top of an existing drawer to handle multi branch tasks.
Preview drawer
Use Drawer to quickly preview details of an object, such as those in a list.
API
| Property | Description | Type | Default |
|---|---|---|---|
afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |
bodyStyle | Style of the drawer content part | object | - |
className | The class name of the container of the Drawer dialog. | string | - |
closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
closeIcon | custom close icon | ReactNode | |
destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
drawerStyle | Style of the popup layer element | object | - |
footer | The footer for Drawer. | ReactNode | - |
footerStyle | Style of the drawer footer part. | CSSProperties | - |
forceRender | Prerender Drawer component forcely | boolean | false |
getContainer | Return the mounted node for Drawer. | HTMLElement | () => HTMLElement | Selectors | false | 'body' |
headerStyle | Style of the drawer header part | object | - |
height | placement is top or bottom, height of the Drawer dialog. | string|number | 160 |
keyboard | Whether support press esc to close | boolean | true |
mask | Whether to show mask or not. | boolean | true |
maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
maskStyle | Style for Drawer's mask element. | CSSProperties | {} |
placement | The placement of the Drawer. | top | right | bottom | left | right |
push | Nested drawers push behavior | boolean | { distance: string | number } | { distance: 180 } |
style | Style of wrapper element which contains mask compare to drawerStyle | CSSProperties | - |
title | The title for Drawer. | string|ReactNode | - |
visible | Whether the Drawer dialog is visible or not. | boolean | false |
width | Width of the Drawer dialog. | string|number | 300 |
zIndex | The z-index of the Drawer. | Number | 1000 |
onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |