
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@rmwc/drawer
Advanced tools
A navigation drawer slides in from the left and contains the navigation destinations for your app.
These are drawers that are permanently fixed inside of a view.
<Drawer>
<DrawerHeader>
<DrawerTitle>DrawerHeader</DrawerTitle>
<DrawerSubtitle>Subtitle</DrawerSubtitle>
</DrawerHeader>
<DrawerContent>
<List>
<ListItem>Cookies</ListItem>
<ListItem>Pizza</ListItem>
<ListItem>Icecream</ListItem>
</List>
</DrawerContent>
</Drawer>
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.
function Example() {
const [open, setOpen] = React.useState(false);
return (
<>
<div style={{ overflow: 'hidden', position: 'relative' }}>
<Drawer dismissible open={open}>
<DrawerHeader>
<DrawerTitle>DrawerHeader</DrawerTitle>
<DrawerSubtitle>Subtitle</DrawerSubtitle>
</DrawerHeader>
<DrawerContent>
<List>
<ListItem>Cookies</ListItem>
<ListItem>Pizza</ListItem>
<ListItem>Icecream</ListItem>
</List>
</DrawerContent>
</Drawer>
{/* Optional DrawerAppContent */}
<DrawerAppContent
style={{ minHeight: '15rem', padding: '1rem' }}
>
DrawerAppContent is an optional component that will resize
content when the dismissible drawer is open and closed. It
must be placed directly after the Drawer component.
</DrawerAppContent>
</div>
<div style={{ textAlign: 'center' }}>
<Button onClick={() => setOpen(!open)} raised>
Toggle Dismissible
</Button>
</div>
</>
);
}
These are drawers that can be temporarily displayed fixed on the side of the entire viewport.
function Example() {
const [open, setOpen] = React.useState(false);
return (
<>
<Drawer modal open={open} onClose={() => setOpen(false)}>
<DrawerHeader>
<DrawerTitle>DrawerHeader</DrawerTitle>
<DrawerSubtitle>Subtitle</DrawerSubtitle>
</DrawerHeader>
<DrawerContent>
<List>
<ListItem>Cookies</ListItem>
<ListItem>Pizza</ListItem>
<ListItem>Icecream</ListItem>
</List>
</DrawerContent>
</Drawer>
<Button onClick={() => setOpen(!open)} raised>
Toggle Modal
</Button>
</>
);
}
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.
function Example() {
const [open, setOpen] = React.useState(false);
return (
<>
{/** Make the drawer appear right-to-left */}
<Drawer
dir="rtl"
modal
open={open}
onClose={() => setOpen(false)}
>
{/** Set the content back to left-to-right */}
<DrawerHeader dir="ltr">
<DrawerTitle>Right Drawer</DrawerTitle>
<DrawerSubtitle>Subtitle</DrawerSubtitle>
</DrawerHeader>
<DrawerContent dir="ltr">
<List>
<ListItem>Cookies</ListItem>
<ListItem>Pizza</ListItem>
<ListItem>Icecream</ListItem>
</List>
</DrawerContent>
</Drawer>
<Button onClick={() => setOpen(!open)} raised>
Toggle Right Drawer
</Button>
</>
);
}
A Drawer component.
Name | Type | Description |
---|---|---|
dismissible | boolean | Makes a dismissible drawer. |
foundationRef | Ref<MDCModalDrawerFoundation<> | 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. |
An optional header for the Drawer.
An title for the DrawerHeader.
A subtitle for the DrawerHeader.
Content for Drawers.
For the Dismissible variant only. Sibling element that is resized when the drawer opens/closes.
FAQs
RMWC Drawer component
We found that @rmwc/drawer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.