SplitView implementation based on Split.js
There are two implementations:
split-percent
- layout: flexbox
- property: flex-basis
- unit: percent
- embed and absolute gutters
- collapse with animation
- disable pane
split-absolute
- layout: absolute position
- property: left, top, width, height
- unit: pixel
- absolute gutters
- collapse, expand, toggle with animation
- disable pane
- smart size distribution
Using npm:
npm install splitview.jsUsing yarn:
yarn add splitview.jsimport SplitView from 'splitview.js'
import 'splitview.js/dist/splitview.css';
const panes = [
document.getElementById('pane1'),
document.getElementById('pane2')
];
const splitview = SplitView(panes, options?);Default HTML:
<div>
<div id="pane1"></div>
<div id="pane2"></div>
</div>| Name | Type | Default | Description |
|---|---|---|---|
id |
Number, String | null |
Unique pane id. Used in api methods. (optional) |
element |
HTMLElement | null |
Pane element. (required) |
size |
Number, String | 0 |
Initial size of pane element in percents. In split-absolute availabe 'px' and '%', 0 value take up the remaining size. (optional) |
minSize |
Number | 0 |
Minimum size of pane element in pixels. (optional) |
disabled |
Boolean | false |
Disable resize of pane element. (optional) |
fallbackExpandSize |
Number | null |
Fallback expand size in pixels. Only in split-absolute. (optional) |
| Name | Type | Default | Description |
|---|---|---|---|
percent |
Boolean | true |
Create percent or absolute splitview. (optional) |
expandToMin |
Boolean | false |
Grow initial sizes to pane minSize. (optional) |
gutterSize |
Number | 4 |
Gutter size in pixels. (optional) |
gutterAlign |
String | 'center' |
Gutter alignment between elements. (optional) |
gutterMode |
String | 'embed' |
Gutter takes size between elements. Value: 'embed' or 'absolute'. In split-absolute is always 'absolute'. (optional) |
snapOffset |
Number | 0 |
Snap to minimum size offset in pixels. (optional) |
dragInterval |
Number | 1 |
Number of pixels to drag. (optional) |
direction |
String | vertical |
Direction to split: 'vertical' or 'horizontal'. (optional) |
cursor |
String | col-resize |
Cursor to display while dragging. (optional) |
createGutter |
Function | null |
Create custom gutter element. (optional) |
elementStyle |
Function | null |
Set the custom style of each element. (optional) |
gutterStyle |
Function | null |
Set the custom style of the gutter. (optional) |
customGutterClassName |
String | null |
Additional gutter class name. (optional) |
onDrag |
Function | null |
Callback on drag. (optional) |
onDragStart |
Function | null |
Callback on drag start. (optional) |
onDragEnd |
Function | null |
Callback on drag end. (optional) |
onResize |
Function | null |
Callback on resize panes. (optional) |
Create percent slitview:
const panes = [
{
element: document.getElementById('pane1'),
size: 30 //%,
minSize: 100 //px
},
{
element: document.getElementById('pane2'),
size: 40 //%,
minSize: 200 //px
},
{
element: document.getElementById('pane3'),
size: 30 //%,
minSize: 0 //px
}
];
const options = {
onResize: ({percentSizes, sender}) => console.log(percentSizes, sender);
};
const splitview = SplitView(panes, options);Create absolute slitview:
const panes = [
{
element: document.getElementById('pane1'),
size: "300px"
minSize: 40 //px
},
{
element: document.getElementById('pane2'),
size: 0, // take up the remaining size
minSize: 300 //px
},
{
element: document.getElementById('pane3'),
size: "20%",
minSize: 0 //px
}
];
const options = {
percent: false,
snapOffset: 30,
onResize: ({percentSizes, sender}) => console.log(percentSizes, sender);
};
const splitview = SplitView(panes, options);
// Distribute sizes on window resize
window.addEventListener("resize", () => {
splitview.invalidateSize();
});More expamples see demo.
Create percent splitview instance:
const instance = SplitView(panes, options);Create absolute splitview instance:
const instance = SplitView(panes, {
percent: false,
...
});Directly instantiate SplitPercent:
const instance = new SplitView.SplitPercent(panes, options);Directly instantiate SplitAbsolute:
const instance = new SplitView.SplitAbsolute(panes, options);SplitPercent:
SplitAbsolute:
Licensed under the MIT License.