DitherCharts

Sheet

Updated

Sheet is Dialog's pixel Mac window as a drawer, docked to the right, left, top or bottom edge and sliding in from it. It's modal like Dialog: focus stays inside until Escape, the close box or a click outside closes it, then goes back where it was. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Chart Settings

import "@/components/dithercharts/controls.css"
import { DialogButton } from "@/components/dithercharts/dialog"
import { Sheet } from "@/components/dithercharts/sheet"

const [open, setOpen] = useState(false)

<Button variant="outline" aria-haspopup="dialog" onClick={() => setOpen(true)}>Settings</Button>
<Sheet
  title="Chart Settings"
  side="right"
  open={open}
  onOpenChange={setOpen}
  actions={
    <>
      <DialogButton onClick={() => setOpen(false)}>Cancel</DialogButton>
      <DialogButton default onClick={save}>Save</DialogButton>
    </>
  }
>
  <Checkbox label="Show gridlines" defaultChecked />
</Sheet>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add sheet

Props

It renders a native element, so every other attribute that element takes passes through.

Sheet props
PropTypeDefaultDescription
titlerequiredType ReactNodeDefault –The sheet's title, in the pinstriped bar; also its accessible name.
openrequiredType booleanDefault –Whether the sheet is open. It opens modal, as Dialog does: focus stays inside, and goes back where it was on close.
onOpenChangerequiredType (open: boolean) => voidDefault –Called with false on Escape, the close box or a click outside.
childrenrequiredType ReactNodeDefault –The sheet's body, which scrolls when it's taller than the sheet.
actionsType ReactNodeDefault –The button row at the sheet's foot, e.g. a Cancel and a default Save DialogButton.
sideType "right" | "left" | "bottom" | "top"Default "right"The screen edge it slides in from and stays docked to.
widthType number | stringDefault 320A left or right sheet's width, in px or any CSS length, never wider than the screen less 32px. Top and bottom sheets span the screen.
overlayType booleanDefault trueVeils and blurs the page behind the sheet.
classNameType stringDefault –