- Fast: No overhead or attached window event listeners, uses pure CSS for resizing.
- Compatible: Works great in IE9, and even loads in IE8 with polyfills. Early Firefox/Chrome/Safari/Opera supported too.
npm:
$ npm install --save vue-split-panel
// using ES6 modules
import VueSplit from 'vue-split-panel'
Vue.use(VueSplit)A split with two elements, starting at 25% and 75% wide.
<Split style="height: 500px;">
<SplitArea :size="25">
panel left
</SplitArea>
<SplitArea :size="75">
panel right
</SplitArea>
</Split>A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively.
<Split style="height: 500px;">
<SplitArea :size="33" :minSize="100">
panel left
</SplitArea>
<SplitArea :size="33" :minSize="100">
panel center
</SplitArea>
<SplitArea :size="33" :minSize="300">
panel right
</SplitArea>
</Split>A vertical split with two elements.
<Split style="height: 500px;" :direction="vertical">
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
</Split>A Setting the gutter size to 20px.
<Split style="height: 500px;" :gutterSize="20">
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
</Split>Callbacks that can be added on drag (fired continously), drag start and drag end. If doing more than basic operations in onDrag, add a debounce function to rate limit the callback.
<Split style="height: 500px;" @onDragEnd="onDragEnd" @onDragStart="onDragStart" onDrag="onDrag">
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
</Split>methods: {
onDragStart (size) {
console.log('Drag Start', size) // callback existing size
},
onDrag (size) {
console.log('on Drag', size) // callback new size
},
onDragEnd (size) {
console.log('Drag End', size) // callback new size
}
}
A Reset the panel and get new sizes
<Split style="height: 500px;" ref="mySplit">
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
</Split>methods: {
Reset () {
console.log(this.$refs.mySplit.reset())
}
getSizes () {
console.log(this.$refs.mySplit.getSizes())
}
}
| Property | Type | Default | Description |
|---|---|---|---|
gutterSize |
Number | 10 | Gutter size in pixels. |
direction |
String | 'horizontal' | Direction to split: horizontal or vertical. |
| Event Name | Description | Return Value |
|---|---|---|
onDrag |
Callback on drag. | current size |
onDragStart |
Callback on drag start. | new size |
onDragEnd |
Callback on drag end. | new size |
| Method Name | Description | Arguments |
|---|---|---|
reset |
Reset panel. | none |
| Property | Type | Default | Description |
|---|---|---|---|
sizes |
Array | Initial sizes of each element in percents or CSS values. | |
minSize |
Number or Array | 100 | Minimum size of each element. |
vue-split-panel does not set CSS beyond the minimum needed to manage the width or height of the elements.
This library uses Split.js. These features are supported in the following browsers:
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 22+ ✔ | 6+ ✔ | 9+ ✔ | 15+ ✔ | 6.2+ ✔ | Sponsored ✔ |
This project is licensed under the MIT License - see the LICENSE.md file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent