Overlays
BottomSheet
Drag-to-dismiss sheet that follows the finger, rubber-bands at the top and commits on distance or velocity.
BottomSheet
import { BottomSheet } from '@anomalia/ui'; Notes
- Release is decided by distance AND velocity: a short fast flick dismisses, a long slow drag springs back.
- Body content scrolls normally; the drag only starts from the sheet chrome or when the body is at its top.
- Above 768px it becomes a centred floating card, so one component covers both layouts.
Examples
Basics
Drag the sheet down: it follows the finger 1:1, the scrim fades with the distance, and release commits on distance OR velocity — a short fast flick dismisses.
API
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Bindable visibility. |
height | 'auto' | 'half' | 'full' | 'auto' | Sheet height. |
grabber | boolean | true | Drag handle — also gates the gesture. |
dismissible | boolean | true | Escape, scrim and drag can close it. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.