CwDrawer

Bottom drawer that collapses into a summary bar with item chips and expands to reveal full content. Content stays mounted through the close animation, the collapsed panel can't be tabbed into, and the height is capped on short screens.

Alerts drawer

Main page content sits here. The drawer lives at the bottom.

Online 169 Offline 27 Alerts 10 Loading 0
CwDrawer example Copy code 
<CwDrawer
	bind:open={open}
	label="Alerts"
	items={items}
	height="18rem"
>
	<div>Drawer content goes here</div>
</CwDrawer>
API

Usage and API reference

CwDrawer is a bottom panel that collapses to a summary bar. Use it for secondary detail, such as a device list under a map, that people open when they need it.

How to think about it

  1. Summarise in the collapsed bar Pass `items` (label, optional icon and tone) or a custom `collapsed` snippet. The whole bar toggles the drawer, and controls inside a custom snippet stay independently clickable.
  2. Cap the height `height` sets the open panel height; it is capped at 60% of the viewport so landscape phones keep room for the page.
  3. Keep content mounted for the animation Content stays rendered until the close animation finishes and is inert while collapsed, so hidden controls are never reachable by keyboard.

Props and callbacks

APITypeDetails
open

Default: false

booleanBindable expanded state.
height

Default: '20rem'

stringCSS height of the open panel (capped at 60dvh).
label
stringText on the left of the collapsed bar.
icon
stringSVG path (16×16) for the bar icon.
items
CwDrawerItem[]Summary items in the collapsed bar: `{ id, label, icon?, tone? }`.
collapsed
SnippetCustom collapsed-bar content instead of `items`.
children
SnippetPanel content.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Drawer with status summary
Drawer with status summary Copy code 
<script lang="ts">
	import { CwDrawer } from '@cropwatchdevelopment/cwui';

	let open = $state(false);
</script>

<CwDrawer
	bind:open
	label="Devices"
	items={[
		{ id: 'ok', label: '12 online', tone: 'success' },
		{ id: 'warn', label: '2 warnings', tone: 'warning' }
	]}
>
	<p>Device list goes here.</p>
</CwDrawer>