A panel which slides in from the edge of the screen.
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.
Common props ref:Common props
🚨 Note: v5 use rootClassName
& rootStyle
to config wrapper style instead of className
& style
in v4 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) | - | |
bodyStyle | Style of the drawer content part | CSSProperties | - | |
className | Config Drawer Panel className. Use rootClassName if want to config top dom style | string | - | |
closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to null or false | boolean | ReactNode | <CloseOutlined /> | |
contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | |
destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |
extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
footer | The footer for Drawer | ReactNode | - | |
footerStyle | Style of the drawer footer part | CSSProperties | - | |
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 | |
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 } | 4.5.0+ |
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 | - | |
size | preset size of drawer, default 378px and large 736px | 'default' | 'large' | 'default' | 4.17.0 |
title | The title for Drawer | ReactNode | - | |
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) | - |
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 |