Drawer
Panel slides from screen edge.
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 that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
- Use a Form to create or edit a set of information.
- Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer - comes very handy.
When a same Form is needed in multiple places.
Examples#
Basic#
Custom Placement#
Add Custom Footer#
hidden close button and prevent mask clicked close#
API#
| Property | Description | Type | Default |
|---|---|---|---|
| visible | boolean | ||
| onClose | () => void | ||
| title | ReactNode | ||
| footer | ReactNode | ||
| placement | 'top' | 'right' | 'bottom' | 'left' | 'right' | |
| closable | boolean | true | |
| maskClosable | boolean | true | |
| width | string | number | 400 | |
| height | string | number | 300 |