sveltejs/svelte-subdivide

Name: svelte-subdivide

Owner: Svelte

Description: A component for building Blender-style layouts in Svelte apps

Created: 2018-05-20 04:37:58.0

Updated: 2018-05-23 13:53:52.0

Pushed: 2018-05-20 14:38:54.0

Homepage: null

Size: 25

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

svelte-subdivide (demo)

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

Installation

 add @sveltejs/svelte-subdivide

Usage

divide component={Pane} />

ipt>
port Subdivide from '@sveltejs/svelte-subdivide';
port Pane from './Pane.html';

port default {
components: { Subdivide },

data() {
  return {
    Pane
  };
}

ript>

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 -->
>
if selected}
<svelte:component this={selected.component}/>
else}
{#each options as option}
  <button on:click="set({ selected: option })">
    {selected.label}
  </button>
{/each}
if}
v>

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

Parameters

You can specify a spacing parameter that controls the width of the dividers. It can be any CSS length:

divide component={Pane} spacing="0.5em"/>

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