svelte-view-split

1.0.3 • Public • Published

svelte-view-split

Create resizible views (panels) in svelte.

Features:

  • Size is less than 2 kb
  • Support both horizontal and vertical splits
  • Support multiple splits
  • Support lifecyle functions
  • Support min and max sizes
  • Support custom divider size
  • Support for legacy browser such as IE 11

Basic Example

In order for the below example to work correctly, the classname view-split needs to have display: flex.

<script>
  import { ViewSplit } from "svelte-view-split";
  const options = { dividerSize: 17 };
</script>

<ViewSplit {options}>
  <div>s</div>
  <div>p</div>
  <div>l</div>
  <div>i</div>
  <div>t</div>
</ViewSplit>

<style>
  :global(div.view-split) {
    display: flex;
  }

  :global(div.divider) {
    background-color: rgb(156, 70, 255);
  }
</style>

API

<ViewSplit {options}>
  <div>s</div>
  <div>p</div>
</ViewSplit>

options Type: object

divide Type: string Default: 'vertical' Values: 'vertical' | 'horizontal'

sizes Type: number | Array<number> Default: new Array(children.length).fill(children.length / 2)

minSizes Type: number | Array<number> Default: new Array(children.length).fill(0)

maxSizes Type: number | Array<number> Default: new Array(children.length).fill(Number.POSITIVE_INFINITY)

onDrag Type: Function(sizes)

beforeDrag Type: Function(sizes)

afterDrag Type: Function(sizes)

More Examples

horizontal divide

<script>
  import { ViewSplit } from "svelte-view-split";
  const options = { dividerSize: 17 };
</script>

<ViewSplit {options}>
  <div>s</div>
  <div>p</div>
  <div>l</div>
  <div>i</div>
  <div>t</div>
</ViewSplit>

<style>
  :global(div.view-split) {
    display: flex;
    flex-direction: column;
  }

  :global(div.divider) {
    background-color: rgb(156, 70, 255);
  }
</style>

Package Sidebar

Install

npm i svelte-view-split

Weekly Downloads

4

Version

1.0.3

License

MIT

Unpacked Size

25.2 kB

Total Files

7

Last publish

Collaborators

  • tgnd