# Drawer

- Page: https://jiguang132.com/resources/arco-design/docs/drawer
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

A floating layer that slides in from the edge of the screen.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage of Drawer. Click the trigger button to slide out the drawer from the right, click the mask area to close.
- **Customize popup position**: Use `placement` to customize the position where the drawer will slide out from.
- **Custom node**: The content can be customized through `title` and `footer`. When set to `null`, the corresponding dom node won't be rendered.
- **Form in drawer**: Use form in drawer.
- **Nested drawer**: Nested drawer.
- **Information preview drawer**: Used for quick preview of the information. Click the mask area to close.
- **Popup Container**: Use `getPopupContainer` to specify the parent node where the drawer should mount to.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Drawer

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|autoFocus|Whether to focus on the first focusable element by default. Only works when `focusLock` is turned on.|boolean |`true`|2.13.0|
|closable|Whether to show the close button on top-right of the drawer dialog|boolean |`true`|-|
|confirmLoading|Whether the OK button is in loading state|boolean |`-`|-|
|escToExit|Whether to enable pressing `ESC` to close the drawer.|boolean |`true`|2.10.0|
|focusLock|Whether to lock the focus in the drawer box.|boolean |`true`|2.13.0|
|mask|Whether to show mask|boolean |`true`|-|
|maskClosable|Whether to close the drawer when the mask is clicked|boolean |`true`|-|
|mountOnEnter|Whether to render the drawer component only when it is opened initially.|boolean |`true`|-|
|unmountOnExit|Whether to unmount component when hidden|boolean |`-`|-|
|visible|Visibility of the drawer|boolean |`-`|-|
|zIndex|Set the zIndex of the drawer|number |`-`|2.42.0|
|placement|The placement of the drawer: `top` `right` `bottom` `left`|'top' \| 'right' \| 'bottom' \| 'left' |`right`|-|
|cancelText|Text of the Cancel button|ReactNode |`-`|-|
|closeIcon|Custom the close button on top-right of the drawer dialog|ReactNode |`-`|2.49.0|
|footer|The footer element. Drawer will not render the footer element when `footer` is `null`|ReactNode |`-`|-|
|okText|Text of the OK button|ReactNode |`-`|-|
|title|The title element. Drawer will not render the title element when `title` is `null`|ReactNode |`-`|-|
|bodyStyle|The additional css style for content|CSSProperties |`-`|2.9.0|
|cancelButtonProps|The props of `cancel` button|ButtonProps |`-`|2.26.0|
|className|Additional css class|string \| string[] |`-`|-|
|headerStyle|The additional css style for header|CSSProperties |`-`|2.9.0|
|height|The height of the drawer dialog. Only works when `placement` is `top` or `bottom`|string \| number |`250`|-|
|maskStyle|Style of the drawer mask|CSSProperties |`-`|-|
|okButtonProps|The props of `ok` button|ButtonProps |`-`|2.26.0|
|style|Additional style|CSSProperties |`-`|-|
|width|The width of the drawer dialog. Only works when `placement` is `left` or `right`|string \| number |`250`|-|
|wrapClassName|The additional class name of the container of the drawer dialog|string \| string[] |`-`|-|
|afterClose|Callback when drawer is closed|() => void |`-`|-|
|afterOpen|Callback when drawer is opened|() => void |`-`|-|
|getChildrenPopupContainer|Set the mount node for popup such as `Select`, `Tooltip`, etc. Default to the drawer dialog.|(node: HTMLElement) => Element |`-`|-|
|getPopupContainer|Parent node which the drawer should be rendered to.|() => Element |`() => document.body`|-|
|onCancel|Callback when the Cancel button is clicked|(e: MouseEvent \| Event) => void |`-`|-|
|onOk|Callback when the OK button is clicked|(e: Event) => void |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt