5.26.2

Drawer

A panel that slides out from the edge of the screen.
Importimport { Drawer } from "antd";

When To Use

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.

  • 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.

Notes for developers

Since the 5.17.0, we provided the loading prop by the Spin. However, since the 5.18.0 version, we have fixed this design error and replaced the Spin with the Skeleton, and also modified the type of loading prop, which can only accept boolean type.

Examples

Basic drawer.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

Set the loading status of Drawer.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
5.17.0
Render in this

Render in current dom. custom container, check getContainer.

Note: style and className props are moved to Drawer panel in v5 which is aligned with Modal component. Original style and className props are replaced by rootStyle and rootClassName.

When getContainer returns a DOM node, you need to manually set rootStyle to { position: 'absolute' }, see #41951.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

Use Drawer to quickly preview details of an object, such as those in a list.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

The default width (or height) of Drawer is 378px, and there is a preset large size 736px.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

The Drawer can appear from any edge of the screen.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

Use a form in Drawer with a submit button.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

Open a new drawer on top of an existing drawer to handle multi branch tasks.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

Set the className of the build-in module (header, body, footer, mask, wrapper) of the drawer through the classNames.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon

API

Common props ref:Common props

PropsDescriptionTypeDefaultVersion
autoFocusWhether Drawer should get focused after openbooleantrue4.17.0
afterOpenChangeCallback after the animation ends when switching drawersfunction(open)-
classNameConfig Drawer Panel className. Use rootClassName if want to config top DOM stylestring-
classNamesSemantic structure classNameRecord<SemanticDOM, string>-5.10.0
closeIconCustom close icon. 5.7.0: close button will be hidden when setting to null or falseReactNode<CloseOutlined />
destroyOnCloseWhether to unmount child components on closing drawer or notbooleanfalse
destroyOnHiddenWhether to unmount child components on closing drawer or notbooleanfalse5.25.0
extraExtra actions area at cornerReactNode-4.17.0
footerThe footer for DrawerReactNode-
forceRenderPre-render Drawer component forciblybooleanfalse
getContainermounted node and display window for DrawerHTMLElement | () => HTMLElement | Selectors | falsebody
headerStyleStyle of the drawer header partCSSProperties-
heightPlacement is top or bottom, height of the Drawer dialogstring | number378
keyboardWhether support press esc to closebooleantrue
maskWhether to show mask or notbooleantrue
maskClosableClicking on the mask (area outside the Drawer) to close the Drawer or notbooleantrue
placementThe placement of the Drawertop | right | bottom | leftright
pushNested drawers push behaviorboolean | { distance: string | number }{ distance: 180 }4.5.0+
rootStyleStyle of wrapper element which contains mask compare to styleCSSProperties-
styleStyle of Drawer panel. Use styles.body if want to config body onlyCSSProperties-
stylesSemantic structure styleRecord<SemanticDOM, CSSProperties>-5.10.0
sizepreset size of drawer, default 378px and large 736px'default' | 'large''default'4.17.0
titleThe title for DrawerReactNode-
loadingShow the Skeletonbooleanfalse5.17.0
openWhether the Drawer dialog is visible or notbooleanfalse
widthWidth of the Drawer dialogstring | number378
zIndexThe z-index of the Drawernumber1000
onCloseSpecify a callback that will be called when a user clicks mask, close button or Cancel buttonfunction(e)-
drawerRenderCustom drawer content render(node: ReactNode) => ReactNode-5.18.0

Semantic DOM

  • mask
    5.13.0
    Mask element
  • content
    5.13.0
    Drawer container element
  • header
    5.13.0
    Header element
  • body
    5.13.0
    Body element
  • footer
    5.13.0
    Footer element

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
footerPaddingBlockVertical padding of footernumber8
footerPaddingInlineHorizontal padding of footernumber16
zIndexPopupz-index of drawernumber1000
Global TokenHow to use?
contributors
  • AlertMessage