Drawer
Drawer
A panel that slides out from the edge of the screen.
Importimport { Drawer } from "antd"; |
Sourcecomponents/drawer |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport { Drawer } from "antd"; |
Sourcecomponents/drawer |
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.
Notes for developers
Since the
5.17.0, we provided theloadingprop by the Spin. However, since the5.18.0version, we have fixed this design error and replaced the Spin with the Skeleton, and also modified the type ofloadingprop, which can only acceptbooleantype.
Common props ref：Common props
v5 uses rootClassName & rootStyle to configure the outermost element style, instead of className & style from v4. This is done to align the API with Modal.
| Props | Description | Type | Default | Version |
|---|---|---|---|---|
| autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
| afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - | |
| className | Config Drawer Panel className. Use rootClassName if want to config top DOM style | string | - | |
| classNames | Semantic structure className | Record<SemanticDOM, string> | - | 5.10.0 |
| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to null or false | ReactNode | <CloseOutlined /> | |
| Whether to unmount child components on closing drawer or not | boolean | false | ||
| destroyOnHidden | Whether to unmount child components on closing drawer or not | boolean | false | 5.25.0 |
| extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
| footer | The footer for Drawer | ReactNode | - | |
| forceRender | Pre-render Drawer component forcibly | boolean | false | |
| getContainer | mounted node and display window for Drawer | HTMLElement | () => HTMLElement | Selectors | false | body | |
| headerStyle | Style of the drawer header part | CSSProperties | - | |
| height | Placement is top or bottom, height of the Drawer dialog | string | number | 378 | |
| 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 | |
| push | Nested drawers push behavior | boolean | { distance: string | number } | { distance: 180 } | 4.5.0+ |
| rootStyle | Style of wrapper element which contains mask compare to style | CSSProperties | - | |
| style | Style of Drawer panel. Use styles.body if want to config body only | CSSProperties | - | |
| styles | Semantic structure style | Record<SemanticDOM, CSSProperties> | - | 5.10.0 |
| size | preset size of drawer, default 378px and large 736px | 'default' | 'large' | 'default' | 4.17.0 |
| title | The title for Drawer | ReactNode | - | |
| loading | Show the Skeleton | boolean | false | 5.17.0 |
| open | Whether the Drawer dialog is visible or not | boolean | false | |
| width | Width of the Drawer dialog | string | number | 378 | |
| 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) | - | |
| drawerRender | Custom drawer content render | (node: ReactNode) => ReactNode | - | 5.18.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| footerPaddingBlock | Vertical padding of footer | number | 8 |
| footerPaddingInline | Horizontal padding of footer | number | 16 |
| zIndexPopup | z-index of drawer | number | 1000 |
Basic drawer.
Set the loading status of Drawer.
Render in current dom. custom container, check getContainer.
Note:
styleandclassNameprops are moved to Drawer panel in v5 which is aligned with Modal component. OriginalstyleandclassNameprops are replaced byrootStyleandrootClassName.
When
getContainerreturns a DOM node, you need to manually setrootStyleto{ position: 'absolute' }, see #41951.
Use Drawer to quickly preview details of an object, such as those in a list.
The default width (or height) of Drawer is 378px, and there is a preset large size 736px.
The Drawer can appear from any edge of the screen.
Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.
Use a form in Drawer with a submit button.
Open a new drawer on top of an existing drawer to handle multi branch tasks.
Set the className of the build-in module (header, body, footer, mask, wrapper) of the drawer through the classNames.
