Learn Sheet — omaris

1. Sides

Four edges. A bottom sheet is what a phone wants; the sides suit a desktop panel.

1<script lang="ts">2	import { Button, Sheet } from 'omaris';34	let side = $state<'start' | 'end' | 'top' | 'bottom'>('end');5	let open = $state(false);67	function show(next: typeof side) {8		side = next;9		open = true;10	}11</script>1213<Button variant="outlined" size="xs" onclick={() => show('start')}>start</Button>14<Button variant="outlined" size="xs" onclick={() => show('end')}>end</Button>15<Button variant="outlined" size="xs" onclick={() => show('top')}>top</Button>16<Button variant="outlined" size="xs" onclick={() => show('bottom')}>bottom</Button>1718<Sheet bind:open {side} title="Filters" description="side = {side}">19	<p class="text-body-md text-muted-foreground">Drag the handle to dismiss it, or press outside.</p>20</Sheet>

2. Snap points

snapPoints are fractions of the screen a bottom sheet settles at, so it can be a peek, a half sheet and a full one without three components.

1<script lang="ts">2	import { Button, Sheet } from 'omaris';34	let open = $state(false);5	let snap = $state(0);6</script>78<Button variant="tonal" onclick={() => (open = true)}>Open a snapping sheet</Button>910<Sheet11	bind:open12	bind:snap13	side="bottom"14	size="full"15	snapPoints={[0.25, 0.6, 1]}16	title="Nearby drivers"17	description="Drag it up and down"18>19	<div class="flex flex-col gap-3">20		{#each { length: 10 }, i (i)}21			<div class="h-12 rounded-shape-md bg-surface-container"></div>22		{/each}23	</div>24</Sheet>

3. With a footer

The footer stays put while the body scrolls, so the actions never leave — the shape for editing a record beside the table it came from.

1<script lang="ts">2	import { Button, Input, Sheet } from 'omaris';34	let open = $state(false);5</script>67<Button variant="tonal" onclick={() => (open = true)}>Edit customer</Button>89<Sheet bind:open side="end" size="md" title="Edit customer">10	<div class="flex flex-col gap-4">11		<Input label="Name" value="Kurdistan Roasters" />12		<Input label="City" value="Erbil" />13		<Input label="Phone" value="0770 123 4567" />14	</div>15	{#snippet footer()}16		<Button variant="text" onclick={() => (open = false)}>Cancel</Button>17		<Button onclick={() => (open = false)}>Save</Button>18	{/snippet}19</Sheet>

4. Persistent

modal={false} is a panel, not an interruption: no backdrop, and the page behind stays live. With inline it sits inside its own container, so a map keeps its controls and a screen keeps its navigation bar. Bind snap and the page can move it — a focused search box lifts it, a trip drops it.

The page behind: still scrollable, tappable, and where the map would be.

1<script lang="ts">2	import { Button, Input, List, ListItem, Sheet, Text } from 'omaris';34	let snap = $state(0.4);5	const PLACES = ['Citadel', 'Ankawa', '60m Street', 'Bakhtiari', 'Family Mall', 'Gulan Park'];6</script>78<div class="relative h-96 w-full overflow-clip rounded-shape-lg bg-surface-container">9	<div class="grid h-full place-items-start p-4">10		<Text variant="body-sm" tone="muted">11			The page behind: still scrollable, tappable, and where the map would be.12		</Text>13	</div>1415	<Sheet16		open17		inline18		modal={false}19		dismissible={false}20		side="bottom"21		size="full"22		snapPoints={[0.25, 0.55, 1]}23		bind:snap24		classes={{ root: 'border-t border-border' }}25	>26		<div class="flex flex-col gap-3">27			<Input placeholder="Where to?" onfocus={() => (snap = 1)} />28			<div class="flex gap-2">29				<Button size="xs" variant="tonal" onclick={() => (snap = 0.25)}>Peek</Button>30				<Button size="xs" variant="tonal" onclick={() => (snap = 0.55)}>Half</Button>31				<Button size="xs" variant="tonal" onclick={() => (snap = 1)}>Full</Button>32			</div>33			<List>34				{#each PLACES as place (place)}35					<ListItem headline={place} supportingText="Tap to go" onclick={() => (snap = 0.25)} />36				{/each}37			</List>38		</div>39	</Sheet>40</div>

Walkthrough