• Stars
    star
    129
  • Rank 269,448 (Top 6 %)
  • Language
    JavaScript
  • License
    Other
  • Created almost 6 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A component for building Blender-style layouts in Svelte apps

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

More Repositories

1

svelte

Cybernetically enhanced web apps
JavaScript
75,642
star
2

kit

web development, streamlined
JavaScript
17,332
star
3

sapper

The next small thing in web development, powered by Svelte
TypeScript
7,031
star
4

realworld

SvelteKit implementation of the RealWorld app
Svelte
2,129
star
5

template

Template for building basic applications with Svelte
JavaScript
1,732
star
6

svelte-preprocess

A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
TypeScript
1,687
star
7

svelte-devtools

A browser extension to inspect Svelte application by extending your browser devtools capabilities
Svelte
1,312
star
8

language-tools

The Svelte Language Server, and official extensions which use it
TypeScript
1,128
star
9

vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
JavaScript
787
star
10

sapper-template

Starter template for Sapper apps
JavaScript
706
star
11

prettier-plugin-svelte

Format your svelte components using prettier.
TypeScript
684
star
12

svelte-virtual-list

A virtual list component for Svelte apps
JavaScript
656
star
13

integrations

Ways to incorporate Svelte into your stack
633
star
14

gl

A (very experimental) project to bring WebGL to Svelte
JavaScript
608
star
15

svelte-loader

Webpack loader for svelte components.
JavaScript
591
star
16

community-legacy

Svelte community meetups, packages, resources, recipes, showcase websites, and more
Svelte
565
star
17

component-template

A base for building shareable Svelte components
JavaScript
551
star
18

rollup-plugin-svelte

Compile Svelte components with Rollup
JavaScript
489
star
19

learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte
Svelte
440
star
20

eslint-plugin-svelte3

An ESLint plugin for Svelte v3 components.
JavaScript
377
star
21

svelte-scroller

A <Scroller> component for Svelte apps
Svelte
337
star
22

template-webpack

Template for building basic Svelte applications with webpack
JavaScript
301
star
23

sites

Monorepo for the sites in the Svelte ecosystem
Svelte
277
star
24

svelte-repl

The <Repl> component used on the Svelte website
Svelte
273
star
25

rfcs

RFCs for changes to Svelte
269
star
26

eslint-plugin-svelte

ESLint plugin for Svelte using AST
TypeScript
242
star
27

sapper-studio

An electron app for building Sapper projects
HTML
220
star
28

v2.svelte.dev

The Svelte v2 website
HTML
209
star
29

svelte-hmr

HMR commons for Svelte 3
JavaScript
201
star
30

site-kit

Svelte
173
star
31

hn.svelte.dev

Hacker News clone built with Svelte and Sapper
Svelte
163
star
32

svelte-todomvc

TodoMVC implemented in Svelte
Svelte
137
star
33

svelte-cli

Command line interface for Svelte
JavaScript
104
star
34

gestures

Svelte actions for cross-platform gesture detection
TypeScript
88
star
35

svelte-hackernews

WIP Hacker News clone written in Svelte
JavaScript
78
star
36

svelte-eslint-parser

Svelte parser for ESLint
TypeScript
74
star
37

svelte-custom-elements

Turn Svelte components into web components
JavaScript
49
star
38

svelte-extras

Extra methods for Svelte components
JavaScript
43
star
39

sapper-template-rollup

Starter Rollup template for Sapper apps
JavaScript
40
star
40

svelte-upgrade

Upgrade your Svelte templates for version 2
JavaScript
36
star
41

branding

Logos etc for Svelte and related projects
35
star
42

hn.svelte.technology

Hacker News, built with Sapper
HTML
35
star
43

svelte-transitions

Officially supported transition plugins for Svelte
JavaScript
34
star
44

examples

A collection of Svelte(Kit) examples
33
star
45

sapper-template-webpack

Starter webpack template for Sapper apps
JavaScript
33
star
46

kit-template-default

The default SvelteKit template, generated with create-svelte
Svelte
32
star
47

discord-bot

TypeScript
32
star
48

svelte-atom

Syntax, diagnostics, and other smarts for Svelte in Atom
JavaScript
30
star
49

community

27
star
50

svelte-dbmonster

Svelte implementation of DBMonster
JavaScript
26
star
51

template-custom-element

Template for building basic applications with Svelte and custom elements
HTML
21
star
52

generate-ssr

Server-side rendering for Svelte
JavaScript
20
star
53

kit-sandbox

A sandbox for maintainers
JavaScript
17
star
54

template-store

Demonstrating the use of svelte/store
JavaScript
17
star
55

svelte-transitions-draw

Draw transition plugin for Svelte
JavaScript
16
star
56

api.svelte.dev

The API worker source for https://api.svelte.dev
TypeScript
14
star
57

sapper-legacy.svelte.dev

Old docs site for Sapper
HTML
13
star
58

action-deploy-docs

github action for the svelte org to deploy documentation to the svelte api
TypeScript
12
star
59

svelte-bench

Benchmarks for Svelte
JavaScript
10
star
60

sveltegram

Sapper/Svelte remix of nextgram
JavaScript
8
star
61

svelte-transitions-fade

Fade transition plugin for Svelte
JavaScript
8
star
62

assets

Large static files used on the Svelte website
7
star
63

svelte-transitions-slide

Slide transition plugin for Svelte
JavaScript
5
star
64

svelte-transitions-fly

Fly transition plugin for Svelte
JavaScript
4
star
65

redirects

Redirect old Svelte websites to their shiny new equivalents
JavaScript
3
star