Sheet

A panel that slides in from any edge of the window.

SheetProps packages/core/src/extra-controls.ts:796 ↗

Import

import { Sheet } from "@tarve/core";

Usage

Sheet.tsx

import { Sheet, Switch } from "@tarve/core";

let open = true;
let compact = false;

<Sheet
  open={open}
  side="right"
  title="Preferences"
  onOpenChange={(next) => {
    open = next;
  }}
>
  <Switch label="Compact mode" checked={compact} onCheckedChange={(value) => (compact = value)} />
</Sheet>

Props

Prop	Type	Default
`open` required	`boolean`	—
`closeOnEscape`	`boolean`	`true`
`closeOnOverlay`	`boolean`	`true`
`description`	`string`	—
`footer`	`Child`	—
`onOpenChange`	`(open: boolean) => void`	—
`showClose`	`boolean`	`true`
`side`	`SheetSide`	`"right"`
`size`	`Style["width"]`	`400`
`title`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

SheetSide

type SheetSide = "left" | "right" | "top" | "bottom";