Components / Sheet
Sheet
Slide-in sheet panel with snap points, dismiss gesture, and 4-sided positioning.
overlays v0.8.0
Playground
Examples
Bottom sheet
<cg-button variant="primary" onclick="this.nextElementSibling.open=true">Open bottom sheet</cg-button><cg-sheet side="bottom" label="Quick actions"><cg-stack direction="column" gap="md"><cg-text size="md" weight="semibold">Choose an action</cg-text><cg-stack direction="column" gap="xs"><cg-button variant="tertiary">Share</cg-button><cg-button variant="tertiary">Edit</cg-button><cg-button variant="tertiary">Move</cg-button><cg-button variant="tertiary">Archive</cg-button></cg-stack></cg-stack></cg-sheet>Right side panel
<cg-button variant="primary" onclick="this.nextElementSibling.open=true">Open from right</cg-button><cg-sheet side="right" label="Filters"><cg-stack direction="column" gap="md"><cg-text size="md" weight="semibold">Filters</cg-text><cg-checkbox label="Active only"></cg-checkbox><cg-checkbox label="Premium tier"></cg-checkbox><cg-checkbox label="With preview"></cg-checkbox><cg-checkbox label="Archived"></cg-checkbox><cg-button variant="primary">Apply</cg-button></cg-stack></cg-sheet>Snap points (40% / 90%)
<cg-button variant="primary" onclick="this.nextElementSibling.open=true">Open with snap points</cg-button><cg-sheet side="bottom" label="Player" .snapPoints=${[0.4,0.9]}><cg-stack direction="column" gap="sm"><cg-text size="md" weight="semibold">Snap-aware sheet</cg-text><cg-text size="sm" muted>Drag the handle to snap between 40% and 90% of viewport height.</cg-text></cg-stack></cg-sheet>Import
import { CgSheet } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-sheet';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
label | string | "Sheet" | Accessible label |
side | "bottom"|"right"|"left"|"top" | "bottom" | Slide direction |
snapPoints | number[] | — | Snap positions as viewport fractions |
activeSnap | number | 0 | Active snap index |
dismissible | boolean | true | Click/swipe to dismiss |
Events
| Event | Detail | Description |
|---|---|---|
cg-sheet-close | {} | Sheet dismissed |