2018-05-23 10:56:37 +08:00
---
2022-11-09 12:28:04 +08:00
group: Feedback
2018-05-23 10:56:37 +08:00
category: Components
title: Drawer
2024-03-22 14:22:42 +08:00
description: A panel that slides out from the edge of the screen.
2024-01-29 14:50:36 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
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
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic-right.tsx" > Basic< / code >
< code src = "./demo/placement.tsx" > Custom Placement< / code >
2024-05-09 11:56:53 +08:00
< code src = "./demo/loading.tsx" version = "5.17.0" > Loading< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/extra.tsx" > Extra Actions< / code >
< code src = "./demo/render-in-current.tsx" > Render in current dom< / code >
< code src = "./demo/form-in-drawer.tsx" > Submit form in drawer< / code >
< code src = "./demo/user-profile.tsx" > Preview drawer< / code >
< code src = "./demo/multi-level-drawer.tsx" > Multi-level drawer< / code >
2023-02-23 21:56:43 +08:00
< code src = "./demo/size.tsx" > Preset size< / code >
2023-09-25 20:37:37 +08:00
< code src = "./demo/classNames.tsx" > Customize className for build-in module< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/config-provider.tsx" debug > ConfigProvider< / code >
< code src = "./demo/no-mask.tsx" debug > No mask< / code >
< code src = "./demo/render-panel.tsx" debug > _InternalPanelDoNotUseOrYouWillBeFired< / code >
< code src = "./demo/scroll-debug.tsx" debug > Scroll Debug< / code >
2023-05-09 19:24:50 +08:00
< code src = "./demo/component-token.tsx" debug > Component Token< / code >
2022-11-09 12:28:04 +08:00
2018-05-23 10:56:37 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref: [Common props](/docs/react/common-props)
2024-01-05 10:12:22 +08:00
<!-- prettier - ignore -->
:::info{title=注意}
v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `className` & `style` in v4 to align the API with Modal.
:::
2022-08-01 23:20:04 +08:00
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 |
2022-08-23 16:22:00 +08:00
| afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - | |
2024-03-11 13:40:29 +08:00
| className | Config Drawer Panel className. Use `rootClassName` if want to config top DOM style | string | - | |
2024-02-05 11:45:42 +08:00
| classNames | Semantic structure className | [Record<SemanticDOM, string> ](#semantic-dom ) | - | 5.10.0 |
2024-02-01 10:36:21 +08:00
| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | < CloseOutlined /> | |
2020-10-21 10:33:43 +08:00
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |
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 | - | |
2022-11-19 22:56:58 +08:00
| forceRender | Pre-render Drawer component forcibly | boolean | false | |
2022-04-20 23:14:32 +08:00
| getContainer | mounted node and display window for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
2022-03-23 15:51:44 +08:00
| headerStyle | Style of the drawer header part | CSSProperties | - | |
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 | |
| 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+ |
2022-08-01 23:20:04 +08:00
| rootStyle | Style of wrapper element which **contains mask** compare to `style` | CSSProperties | - | |
| style | Style of Drawer panel. Use `bodyStyle` if want to config body only | CSSProperties | - | |
2024-02-05 11:45:42 +08:00
| styles | Semantic structure style | [Record<SemanticDOM, CSSProperties> ](#semantic-dom ) | - | 5.10.0 |
2023-02-23 21:56:43 +08:00
| size | preset 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 | - | |
2024-05-14 14:14:16 +08:00
| loading | Show spinning indicator | boolean | false | 5.17.0 |
2022-09-07 10:35:16 +08:00
| open | 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) | - | |
2023-04-11 10:25:24 +08:00
2024-02-05 11:45:42 +08:00
## Semantic DOM
< code src = "./demo/_semantic.tsx" simplify = "true" > < / code >
2023-04-11 10:25:24 +08:00
## Design Token
< ComponentTokenTable component = "Drawer" > < / ComponentTokenTable >