4.7 KiB
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 |
|
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 ref:Common 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) | - |