vue-split-panel

Vue.js split-panel component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-split-panel
103111.0.46 years ago6 years agoMinified + gzip package size for vue-split-panel in KB

Readme

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.

Installation

npm: ``` $ npm install --save vue-split-panel ```

Getting Started

```js // using ES6 modules import VueSplit from 'vue-split-panel' Vue.use(VueSplit) ```

Usage Examples

A split with two elements, starting at 25% and 75% wide. ```html
<SplitArea :size="25">
panel left
</SplitArea>
<SplitArea :size="75">
panel right
</SplitArea>
``` A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively. ```html
<SplitArea :size="33" :minSize="100">
panel left
</SplitArea>
<SplitArea :size="33" :minSize="100">
panel center
</SplitArea>
<SplitArea :size="33" :minSize="300">
panel right
</SplitArea>
``` A vertical split with two elements. ```html
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
``` A Setting the gutter size to 20px. ```html
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
``` 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
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
``` ``` 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
<SplitArea>
panel left
</SplitArea>
<SplitArea>
panel center
</SplitArea>
``` ``` methods: {
Reset () {
console.log(this.$refs.mySplit.reset())
}
getSizes () {
console.log(this.$refs.mySplit.getSizes())
}
} ```

API

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. |

Important Note

vue-split-panel does not set CSS beyond the minimum needed to manage the width or height of the elements.

Browser Support

This library uses Split.js. These features are supported in the following browsers: | Chrome logo | Firefox logo | Internet Explorer logo | Opera logo | Safari logo | BrowserStack logo | |:---:|:---:|:---:|:---:|:---:|:----| | 22+ ✔ | 6+ ✔ | 9+ ✔ | 15+ ✔ | 6.2+ ✔ | Sponsored ✔ |

Built With

  • gulp - Automated development toolkit

License

This project is licensed under the MIT License - see the LICENSE.md file for details