Drawer
The Drawer component provides a hidden or off-canvas panel that can slide in or out from the edge of the screen, offering additional navigation or content without obstructing the main interface. One common use case is when user is analysing a list of entries from a table and they quickly wants to see details for some entries.
Examples
Basic example
Drawer as bottom sheet
Theme
This component uses the following default theme:
- root{}(6 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
| Prop | Description | Default |
|---|---|---|
position | Position of the drawer."start" | "end" | "top" | "bottom" | end |
size | Size of the drawer.string | number | 80% |
className | CSS class name for the drawer.string | |
contentClassName | CSS class name for the content of the drawer.string | |
backdropClassName | CSS class name for the backdrop of the drawer.string | |
disablePadding | Whether the drawer has a backdrop.boolean | false |
header | Whether the drawer has a backdrop.any | |
showCloseButton | Whether the drawer has a backdrop.boolean | true |
children | The content of the drawer.any | |
headerElement | The React element for the drawer header.ReactElement<DrawerHeaderProps, FC<DrawerHeaderProps>> | <DrawerHeader /> |
theme | Theme for the Drawer.DrawerTheme | |
open | If true, the global overlay is open.boolean | |
closeOnBackdropClick | If true, the global overlay will close when the backdrop is clicked.boolean | true |
hasBackdrop | If true, the global overlay will have a backdrop.boolean | true |
closeOnEscape | If true, the global overlay will close when the escape key is pressed.boolean | true |
onClose | A function that is called when the global overlay is closed.() => void |