Skip to content

✂ Simple and lightweight utility for resizable split views. <1kb with 0 dependencies ➗

License

Notifications You must be signed in to change notification settings

wutility/split-views

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

✂ 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 split-views split-views split-views split-views

Split views


$ 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() 

Related

  • React: React component wrapper

Notes

  • Tested on Chrome 67, Firefox 67, Edge 70, Opera 67, Safari 11, Android (>= 4).
  • SplitViews is flex-based.
  • All pull requests are welcome, feel free.

Author

License

MIT