Split-views NPM

✂ SplitViews

Utility for resizable split views.

Fast & Simple to use.
Lightweight <1kb.
Zero dependencies.
No events listeners are attached to Window.
Compatible: Firefox - Chrome - Safari - Opera - Android - (FlexBox is not supported in IE).

Split views

Demo

$ npm i split-views
# or
$ yarn add split-views

Usage

import SplitViews from 'split-views';

Or include it via jsDelivr CDN (UMD):

<script src="https://cdn.jsdelivr.net/npm/split-views/build/index.min.js"></script>
<!-- Or via unpkg -->
<script src="https://unpkg.com/split-views"></script>
<!-- Access via global object : window.SplitViews -->

Documentation

SplitViews(options: Object): Object

Options	Type	Default	Description
`parent`	`HTMLElement` or `String`	`'.split-view'`	Parent element.
`sizes`	`Array<Number>`	`[]`	Initial sizes of each element in %.
`minSize`	`Number`	`0`	Minimum size.
`gutterSize`	`Number`	`5`	Gutter size (seperator).
`direction`	`String`	`'horizontal'`	Resize direction: horizontal or vertical.
`onDragEnd`	`Method`	`null`	Callback with new sizes in %.

Methods & Examples

const options = {
  parent: '#parent-id', // or HTMLElement
  direction: 'horizontal',
  gutterSize: 5,
  minSize: 20,
  sizes: [25, 50, 25],
  onDragEnd: (newSizes) => {
    console.log(newSizes);
  }
};

const sp = SplitViews(options)

// detroy method: remove "touchstart" and "mousedown" events
// the others events are removed by default
sp.detroy()