Svelte Drawer

Check out the demo

A Svelte component for a drawer that slides in from the side of the screen.

Features:

• CSS transitions
• SSR Safe
• Top, right, bottom, or left placement
• Lock body scrolling when open

Usage

npm install svelte-drawer-component

<script>
    import Drawer from 'svelte-drawer-component'
    let open = false
</script>

<button on:click={() => open = true}>Open</button>

<Drawer { open } size='600px'>
    <button on:click={() => open = false}>Close</button>
</Drawer>

The open state for the drawer is handled entirely by the user. This design gives the most control and flexibility over drawer functionality and styling. This means that if you want the drawer to close when the user clicks away, you need to listen for that event.

<Drawer { open } on:clickAway={() => open = false}>
</Drawer>

For custom size and transition duration, use the props. Otherwise, if you want to style the drawer, then you can reach into the classes.

<div class='app'>
    <Drawer></Drawer>
</div>

<style>
    .app :global(.drawer .overlay) {
        background: rgba(100, 100, 100, 0.5);
    }

    .app :global(.drawer .panel) {
        background: black;
        color: white;
    }
</style>

Parameters

Parameter	Default	Description
open	false	Two-way binding for open state of the component
placement	left	Side of screen to slide out from
size	null	Panel size (e.g. '100px', '10em', '70%', null)
duration	0.2	Transition duration in seconds

By default, the size of the panel is set to null and stretches to the size of its parent container.