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.