ant-design/components/drawer/index.en-US.md
2024-02-01 10:36:21 +08:00

4.7 KiB
Raw Blame History

group category subtitle title cover coverDark demo
Feedback Components Drawer https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original
cols
2

A panel which slides in from the edge of the screen.

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.

Examples

Basic Custom Placement Extra Actions Render in current dom Submit form in drawer Preview drawer Multi-level drawer Preset size Customize className for build-in module ConfigProvider No mask _InternalPanelDoNotUseOrYouWillBeFired Scroll Debug Component Token

API

Common props refCommon props

:::info{title=注意} 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) -
className Config Drawer Panel className. Use rootClassName if want to config top dom style string -
classNames Config Drawer build-in module's className header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; -
styles Config Drawer build-in module's style header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; - 5.10.0
closeIcon Custom close icon. 5.7.0: close button will be hidden when setting to null or false ReactNode <CloseOutlined />
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 -
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 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) -

Design Token