Skip to content

A component for building Blender-style layouts in Svelte apps

License

Notifications You must be signed in to change notification settings

saabi/svelte-subdivide

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A component for building Blender-style layouts in Svelte apps

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 65.1%
  • HTML 34.9%