Drawers

A navigation drawer slides in from the left and contains the navigation destinations for your app.

- Module @rmwc/drawer
- Import styles:
- Using CSS Loader
- import '@rmwc/drawer/styles';
- Or include stylesheets
- '@material/drawer/dist/mdc.drawer.css'
- MDC Docs: https://material.io/develop/web/components/drawers/

Permanent

These are drawers that are permanently fixed inside of a view.

``jsx


DrawerHeader
Subtitle



Cookies
Pizza
Icecream



`

Dismissible

These are drawers that can be toggled to an open or closed state inside of a view, but still takes up viewable space when closed.

`jsx
function Example() {
const [open, setOpen] = React.useState(false);

return (
<>




);
}
`

Modal

These are drawers that can be temporarily displayed fixed on the side of the entire viewport.

`jsx
function Example() {
const [open, setOpen] = React.useState(false);

return (
<>
setOpen(false)}>

DrawerHeader
Subtitle



Cookies
Pizza
Icecream




setOpen(!open)} raised>
Toggle Modal


);
}
`

Right Side Drawers

material-components-web doesn't directly support right hand drawers, but it respects the dir attribute on DOM elements. This simple hack will allow you to get drawers that appear from the right hand side of your app. As an aside, the dir attribute can be used to invert many other behaviors where the element is anchored on the left.

`jsx
function Example() {
const [open, setOpen] = React.useState(false);

return (
<>
{/* Make the drawer appear right-to-left /}
dir="rtl"
modal
open={open}
onClose={() => setOpen(false)}
>
{/* Set the content back to left-to-right /}

Right Drawer
Subtitle




Cookies
Pizza
Icecream




setOpen(!open)} raised>
Toggle Right Drawer


);
}
`

Drawer

A Drawer component.

$3

| Name | Type | Description |
|------|------|-------------|
| dismissible | boolean | Makes a dismissible drawer. |
| foundationRef | Ref \| MDCDismissibleDrawerFoundation<>> | Advanced: A reference to the MDCFoundation. |
| modal | boolean | Makes a modal / temporary drawer. |
| onClose | (evt: DrawerOnOpenEventT) => void | Callback that fires when the Drawer is closed. |
| onOpen | (evt: DrawerOnCloseEventT) => void | Callback that fires when the Drawer is opened. |
| open | boolean` | Opens or closes the Drawer. |

DrawerHeader

An optional header for the Drawer.

DrawerTitle

An title for the DrawerHeader.

DrawerSubtitle

A subtitle for the DrawerHeader.

DrawerContent

Content for Drawers.

DrawerAppContent

For the Dismissible variant only. Sibling element that is resized when the drawer opens/closes.