Drawer

A Sheet that defaults to the bottom edge.

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

Drawer rendered by Tarve — Native render. The live version loads when this comes into view.

Import

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

Usage

Drawer.tsx

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

let open = true;

<>
  <Button variant="outline" onClick={() => (open = true)}>
    Show activity
  </Button>
  <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 →

childrenclassclassNamehighlightidkeymotionFromonHighlightonPasteonPointerLeaveonPointerMoveonSizeonTransitionEndrovingGroupstyle

Types

SheetSide

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