Importimport { Drawer } from 'antd'; |
contributors
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
| Props | Description | Type | Default | Version |
|---|---|---|---|---|
| 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 | Customize class for each semantic structure inside the Drawer component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| closable | Whether to show a close button. The position can be configured with placement | boolean | { closeIcon?: React.ReactNode; disabled?: boolean; placement?: 'start' | 'end' } | true | placement: 5.28.0 |
| 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 | |
| focusable | Configuration for focus management in the Drawer | { trap?: boolean, focusTriggerAfterClose?: boolean } | - | 6.2.0 |
| getContainer | mounted node and display window for Drawer | HTMLElement | () => HTMLElement | Selectors | false | body | |
Style of the drawer header part, please use styles.header instead | CSSProperties | - | ||
Placement is top or bottom, height of the Drawer dialog, please use size instead | string | number | 378 | ||
| keyboard | Whether support press esc to close | boolean | true | |
| loading | Show the Skeleton | boolean | false | 5.17.0 |
| mask | Mask effect | boolean | { enabled?: boolean, blur?: boolean, closable?: boolean } | true | mask.closable: 6.3.0 |
| Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | ||
| maxSize | Maximum size (width or height depending on placement) when resizable | number | - | 6.0.0 |
| open | Whether the Drawer dialog is visible or not | boolean | false | |
| 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+ |
| resizable | Enable resizable by dragging | boolean | ResizableConfig | - | boolean: 6.1.0 |
| rootStyle | Style of wrapper element which contains mask compare to style | CSSProperties | - | |
| size | preset size of drawer, default 378px and large 736px, or a custom number | 'default' | 'large' | number | string | 'default' | 4.17.0, string: 6.2.0 |
| style | Style of Drawer panel. Use styles.body if want to config body only | CSSProperties | - | |
| styles | Customize inline style for each semantic structure inside the Drawer component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| title | The title for Drawer | ReactNode | - | |
Width of the Drawer dialog, please use size instead | 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 |
| Props | Description | Type | Default | Version |
|---|---|---|---|---|
| onResizeStart | Callback when resize starts | () => void | - | 6.0.0 |
| onResize | Callback during resizing | (size: number) => void | - | 6.0.0 |
| onResizeEnd | Callback when resize ends | () => void | - | 6.0.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| draggerSize | Size of resize handle | number | 4 |
| footerPaddingBlock | Vertical padding of footer | number | 8 |
| footerPaddingInline | Horizontal padding of footer | number | 16 |
| zIndexPopup | z-index of drawer | number | 1000 |
