Drawer

A Sheet that defaults to the bottom edge.

DrawerProps packages/core/src/advanced-controls.ts:120 ↗

Import

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

Usage

Drawer.tsx

import { Drawer, Text } from "@tarve/core";

let open = true;

<Drawer
  open={open}
  size={280}
  title="Activity"
  onOpenChange={(next) => {
    open = next;
  }}
>
  <Text>3 new events</Text>
</Drawer>

Props

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

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

SheetSide

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