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
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - | |
Style of the drawer body, please use styles.body instead | CSSProperties | - | - | |
| 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 |
Style of the drawer wrapper, please use styles.wrapper instead | CSSProperties | - | - | |
| Whether to unmount child components on closing drawer or not | boolean | false | ||
Whether to unmount child components on closing drawer or not, please use destroyOnHidden instead | boolean | false | - | |
| destroyOnHidden | Whether to unmount child components on closing drawer or not | boolean | false | 5.25.0 |
Style of the drawer panel, please use styles.section instead | CSSProperties | - | - | |
| extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
| footer | The footer for Drawer | ReactNode | - | |
Style of the drawer footer, please use styles.footer instead | CSSProperties | - | - | |
| 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 | ||
Style of the drawer mask, please use styles.mask instead | CSSProperties | - | - | |
| 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 |
| Property | 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorBgMask | The background color of the mask, used to cover the content below the mask, Modal, Drawer, Image and other components use this token | string | rgba(0,0,0,0.45) |
| colorBgTextActive | Control the background color of text in active state. | string | rgba(0,0,0,0.15) |
| colorBgTextHover | Control the background color of text in hover state. | string | rgba(0,0,0,0.06) |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorIconHover | Weak action hover color. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.88) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| fontSizeLG | Large font size | number | 16 |
| fontWeightStrong | Control the font weight of heading components (such as h1, h2, h3) or selected item. | number | 600 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| padding | Control the padding of the element. | number | 16 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
