Vue.js split-panel component
npm install @bitowl/vue-split-panel- __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
`js`
// using ES6 modules
import VueSplit from 'vue-split-panel'
Vue.use(VueSplit)
A split with two elements, starting at 25% and 75% wide.
`html`
panel left
panel right
A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively.
`html`
panel left
panel center
panel right
A vertical split with two elements.
`html`
panel left
panel center
A Setting the gutter size to 20px.
`html`
panel left
panel center
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.
`html`
panel left
panel center
``
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
`html`
panel left
panel center
``
methods: {
Reset () {
console.log(this.$refs.mySplit.reset())
}
getSizes () {
console.log(this.$refs.mySplit.getSizes())
}
}
#### Split props
| Property | Type | Default | Description |
|---|---|---|---|
| gutterSize | Number | 10 | Gutter size in pixels. |direction
| | String | 'horizontal' | Direction to split: horizontal or vertical. |
#### Split events
| 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 |
#### Split methods
| Method Name | Description | Arguments
|---|---|---|
| reset | Reset panel. | none |
#### SplitArea props
| 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 ✔ |
* Webpack - The web framework used
* gulp - Automated development toolkit
This project is licensed under the MIT License - see the LICENSE.md file for details