sveltekit-resizable-div Svelte Themes

Sveltekit Resizable Div

Simple resizable div for svelte

Simple implementation of a resizable div for svelte. Only supports NE resizing for now. I made this to easily reuse the logic, but feel free to copy the code in the .svelte file to customize however you want and/or if you don't want to install a dependency only for this.

This is a work in progress. The position property can be one of 4 cardinal directions (se, ne, sw, nw) and you need to setup the css positioning properly as exemplified below.

Usage:

<script>
    import ResizableDiv from '@aknakos/sveltekit-resizable-div';

    function click() {} //called when resize is clicked
    function release() {} //called when resize is released
    function move() {} //called when size changes during resizing
</script>

<h1>Welcome to SvelteKit</h1>
<ResizableDiv
    on:click={click}
    on:release={release}
    on:move={move}
    class="inside-resizable"
    position="se"
>
    <div>
        Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
    </div>
</ResizableDiv>

<style>
    :global.inside-resizable {
        width: 10rem; /* default width*/
        height: 10rem; /* default height */

        /* positioning */
        position: relative;
        top: 0;
        left: 0;

        /* extra stuff */
        background-color: aquamarine;
    }
</style>

Top categories

Loading Svelte Themes