2018-05-23 10:56:37 +08:00
---
type: Feedback
category: Components
2018-08-05 11:56:40 +08:00
subtitle:
2018-05-23 10:56:37 +08:00
title: Drawer
2020-05-31 11:48:34 +08:00
cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
2018-05-23 10:56:37 +08:00
---
2019-04-19 20:59:45 +08:00
A panel which slides in from the edge of the screen.
2018-05-23 10:56:37 +08:00
## When To Use
2019-04-19 20:59:45 +08:00
A 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.
2018-11-09 15:01:48 +08:00
2019-05-07 14:57:32 +08:00
- 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.
2018-05-23 10:56:37 +08:00
## API
2020-07-12 18:47:14 +08:00
| Props | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2021-09-02 18:57:25 +08:00
| autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
2020-10-21 10:33:43 +08:00
| 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 | - | |
2021-11-26 08:35:07 +08:00
| closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true | |
2020-10-21 10:33:43 +08:00
| closeIcon | Custom close icon | ReactNode | < CloseOutlined /> | |
2021-03-01 19:20:48 +08:00
| contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | |
2020-10-21 10:33:43 +08:00
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |
| drawerStyle | Style of the popup layer element | object | - | |
2021-06-11 08:39:17 +08:00
| extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
2020-10-21 10:33:43 +08:00
| 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 | - | |
2022-03-22 13:23:34 +08:00
| height | Placement is `top` or `bottom` , height of the Drawer dialog | string \| number | 378 | |
2020-10-21 10:33:43 +08:00
| 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` | |
2020-07-12 18:47:14 +08:00
| push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
2020-10-21 10:33:43 +08:00
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - | |
2021-06-11 08:39:17 +08:00
| size | presetted size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
2020-10-21 10:33:43 +08:00
| title | The title for Drawer | ReactNode | - | |
| visible | Whether the Drawer dialog is visible or not | boolean | false | |
2021-06-11 08:39:17 +08:00
| width | Width of the Drawer dialog | string \| number | 378 | |
2020-10-21 10:33:43 +08:00
| 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) | - | |
