Split.js is a lightweight, unopinionated utility for creating adjustable split views or panes.
No dependencies or markup required, just two or more elements with a common parent.
Views can be split horizontally or vertically, with draggable gutters inserted between every two elements.
Split(<HTMLElement|selector[]> elements, <options> options?)
Options | Type | Default | Description |
---|---|---|---|
sizes | Array of numbers | Initial sizes of each element in percents. | |
minSize | Number or array | 100 | Minimum size of each element. |
gutterSize | Number | 10 | Gutter size in pixels. |
snapOffset | Number | 30 | Snap to minimum size offset. |
direction | String | 'horizontal' | Direction to split: horizontal or vertical. |
cursor | String | 'grabbing' | Cursor to display while dragging. |
onDrag | Function | Callback on drag. | |
onDragStart | Function | Callback on drag start. | |
onDragEnd | Function | Callback on drag end. |
A split with two elements, starting at 25% and 75% wide with 200px minimum width.
Split(['#one', '#two'], {
sizes: [25, 75],
minSize: 200
});
#three
#four
A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively.
Split(['#one', '#two', '#three'], {
minSize: [100, 100, 300]
});
#five, minSize: 100px
#six, minSize: 100px
#seven, minSize: 300px
A vertical split with two elements, starting with even heights.
Split(['#eight', '#nine'], {
direction: 'vertical'
});
#eight
#nine
Nested splits, horizontal and vertical.
Split(['#ten', '#eleven']);
Split(['#twelve', '#thirteen'], {
direction: 'vertical'
});
#twelve
#thirteen
#eleven
The actual size calculation falls back from calc() to support IE8, or can be configured to use flexbox.
Split(['#flex-1', '#flex-2'], {
elementStyle: function (dimension, size, gutterSize) {
return { 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)' }
},
gutterStyle: function (dimension, gutterSize) {
return { 'flex-basis': gutterSize + 'px' }
}
});
#flex-1
#flex-2
And with flexbox reverse:
Split(['#flex-3', '#flex-4'], {
elementStyle: function (dimension, size, gutterSize) {
return { 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)' }
},
gutterStyle: function (dimension, gutterSize) {
return { 'flex-basis': gutterSize + 'px' }
}
});
#flex-3
#flex-4
#flex-5
Use the returned instance to access two methods that control the split: setSizes and collapse, a method for getting the current sizes: getSizes and a method for destroying the split: destroy.
var instance = Split(['#fourteen', '#fifteen', '#sixteen'], {
sizes: [50, 25, 25]
});
instance.setSizes([33.3, 33.3, 33.3]); // Set Sizes 33%
instance.collapse(0); // Collapse First
instance.collapse(1); // Collapse Second
instance.collapse(2); // Collapse Third
instance.getSizes(); // Get Sizes
instance.setSizes([50, 25, 25]); // Reset
instance.destroy(); // Destroy
#fourteen
#fifteen
#sixteen
JSFiddle style is also possible: Demo.