Drawer

Native <dialog> from the bottom edge. Platform focus trap and backdrop.

Up

Install

npx @noordvc/raster-cli add drawer

Markup

<dialog class="rs-drawer" open><span class="rs-drawer-title">Notes</span><p class="rs-drawer-body">A bottom panel. Escape closes it.</p></dialog>

React

import { Drawer, DrawerBody, DrawerTitle } from "@/components/raster/drawer";

<Drawer open={open} onClose={() => setOpen(false)}>
  <DrawerTitle>Notes</DrawerTitle>
  <DrawerBody>A bottom panel. Escape closes it.</DrawerBody>
</Drawer>

Classes

.rs-drawer.rs-drawer-title.rs-drawer-body