A package for making temporary sheets of material (normally for navigation or details).
npm install @react-md/sheetA sheet is an extension of the Dialog component that allows for creating a
fixed element that appears inline with other content fixed to the viewport
borders. Sheets are great for:
- containing a persistent navigation tree on desktop
- containing a temporary navigation tree on any device size
- creating dropdown menus on mobile
``sh`
npm install --save @react-md/sheet
It is also recommended to install these other packages as they work hand-in-hand
with this package:
`sh`
npm install --save @react-md/theme \
@react-md/typography \
@react-md/list \
@react-md/dialog \
@react-md/icon \
@react-md/material-icons
You should check out the
full documentation for live
examples and more customization information, but an example usage is shown
below.
`tsx
import type { ReactElement } from "react";
import { Button } from "@react-md/button";
import { List, ListItem } from "@react-md/list";
import { Sheet } from "@react-md/sheet";
import { useToggle } from "@react-md/utils";
export default function Example(): ReactElement {
const [visible, show, hide] = useToggle(false);
return (
<>
onClick={show}
theme="secondary"
themeType="contained"
>
Show
aria-label="Example Sheet"
visible={visible}
onRequestClose={hide}
position={position}
>
);
}
``