Drawers

Usage

Create a Svelte writable store to manage the state of the drawer.

import { writable, type Writable } from 'svelte/store';
const storeDrawer: Writable<boolean> = writable(false);

Implement the Drawer component, passing the store reference. If you wish to make this accessible in global scope of your app, add this to your root layout.

<Drawer open={storeDrawer} position="left">
	(contents)
</Drawer>

Set the store value to true | false to open or close the Drawer.

const drawerOpen: any = () => { storeDrawer.set(true) };

const drawerClose: any = () => { storeDrawer.set(false) };

Implement the trigger methods on any interactive element.

<button class="btn btn-filled-primary" on:click={drawerOpen}>Open</button>

<button class="btn btn-filled-primary" on:click={drawerClose}>Close</button>

Closing the Drawer

Note that you can always close the Drawer by tapping the backdrop or pressing ESC on your keyboard.

Pairing with App Shell

Place the Drawer above and outside the App Shell in your root layout. This will prevent page content shifting as the Drawer changes state.

<Drawer></Drawer>

<AppShell></AppShell>

Properties

Backdrop

Drawer

Slots

Keyboard Interactions