Drawer
A panel that slides out from the edge of the page can replace Modal to present more content.
Import
import { Drawer } from 'rsuite';<Drawer>- The container of Drawer.<Drawer.Body>- The content of Drawer.<Drawer.Actions>- The action buttons of Drawer, usually placed in the header of Drawer. (optional)<Drawer.Header>- The header of Drawer, including the close button. (optional)<Drawer.Title>- The title of Drawer, usually placed in the header of Drawer. (optional)<Drawer.Footer>- The footer of Drawer. (optional)
Examples
Basic
Backdrop
Placement
Size
Props
<Drawer>
| Property | Type (Default) |
Description |
|---|---|---|
| autoFocus | boolean (true) |
When set to true, the Drawer is opened and is automatically focused on its own, accessible to screen readers |
| backdrop | boolean | 'static' | When set to true, the Drawer will display the background when it is opened. Clicking on the background will close the Drawer. If you do not want to close the Drawer, set it to 'static'. |
| backdropClassName | string | Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in". |
| classPrefix | string ('drawer') |
The prefix of the component CSS class |
| closeButton | ReactNode | boolean | Custom close button, set to false to hide close button |
| enforceFocus | boolean (true) |
When set to true, Drawer will prevent the focus from leaving when opened, making it easier for the secondary screen reader to access |
| boolean | ⚠️Deprecated. Use size="full" instead. Full screen |
|
| keyboard | boolean | close Drawer when press esc |
| onClose | () => void | Callback fired when Drawer hide |
| onEnter | () => void | Callback fired before the Drawer transitions in |
| onEntered | () => void | Callback fired after the Drawer finishes transitioning in |
| onEntering | () => void | Callback fired as the Drawer begins to transition in |
| onExit | () => void | Callback fired right before the Drawer transitions out |
| onExited | () => void | Callback fired after the Drawer finishes transitioning out |
| onExiting | () => void | Callback fired as the Drawer begins to transition out |
| onOpen | () => void | Callback fired when Drawer display |
| open * | boolean | Open Drawer |
| placement | Placement(right) |
The placement of Drawer |
| size | 'xs' | 'sm' | 'md' | lg' | 'full' | number | string | Set Drawer size |
ts:Placement
type Placement = 'top' | 'bottom' | 'right' | 'left';