Wondering what’s next for npm?Check out our public roadmap! »

    @sveltejs/svelte-subdivide

    2.2.0 • Public • Published

    svelte-subdivide (demo)

    A component for building Blender-style layouts in Svelte apps.

    subdivide-2

    Installation

    yarn add @sveltejs/svelte-subdivide

    Usage

    <Subdivide component={Pane} />
     
    <script>
      import Subdivide from '@sveltejs/svelte-subdivide';
      import Pane from './Pane.html';
     
      export default {
        components: { Subdivide },
     
        data() {
          return {
            Pane
          };
        }
      };
    </script> 

    The component constructor you supply to <Subdivide> will be instantiated for each cell of your layout. Typically, it would be a component that allows the user to select from a variety of different panes.

    <!-- Pane.html -->
    <div>
      {#if selected}
        <svelte:component this={selected.component}/>
      {:else}
        {#each options as option}
          <button on:click="set({ selected: option })">
            {selected.label}
          </button>
        {/each}
      {/if}
    </div>

    Note that this component uses CSS variables, and may therefore behave strangely in IE.

    Parameters

    You can specify the following parameters:

    • thickness — the thickness of the divider, as a CSS length. Defaults to zero
    • padding — the amount of space either side of the divider that will respond to mouse events. Larger values make it easier to resize panes, but makes it harder to split them. Defaults to 6px
    • color — the color of the divider, if thickness is larger than zero. Defaults to white
    <Subdivide
      component={Pane}
      thickness="1px"
      padding="4px"
      color="black"
    />

    Save/restore

    You can also specify a layout parameter, to implement save and restore:

    <Subdivide bind:layout component={Item}/>
     
    <script>
      import Subdivide from '@sveltejs/svelte-subdivide';
      import Item from './Item.html';
     
      export default {
        components: {
          Subdivide
        },
     
        data() {
          return {
            Item,
            layout: localStorage.layout && JSON.parse(localStorage.layout)
          };
        },
     
        onstate({ changed, current }) {
          if (changed.layout) localStorage.layout = JSON.stringify(current.layout);
        }
      };
    </script> 

    Events

    You can listen for open, close and layout events. Each event is an object with a layout property and, in the case of open and close, a pane property indicating which pane was opened or closed.

    <Subdivide
      component={Pane}
      on:open="console.log(`opened ${event.pane.id}`)"
      on:close="console.log(`closed ${event.pane.id}`)"
      on:layout="console.log(`updated layout`)"
    />

    Configuring webpack

    If you're using webpack with svelte-loader, make sure that you add "svelte" to resolve.mainFields in your webpack config. This ensures that webpack imports the uncompiled component (src/index.html) rather than the compiled version (index.mjs) — this is more efficient.

    If you're using Rollup with rollup-plugin-svelte, this will happen automatically.

    Credits

    Essential inspiration was provided by philholden/subdivide — thanks Phil!

    License

    LIL

    Keywords

    Install

    npm i @sveltejs/svelte-subdivide

    DownloadsWeekly Downloads

    19

    Version

    2.2.0

    License

    LIL

    Unpacked Size

    86.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar