vue-resize-split-pane
Splittable and resizable panes for Vue.js
Install
With yarn:
yarn add vue-resize-split-pane
With npm:
npm i vue-resize-split-pane --save
Use
Global import
//main.js Vue
Local import
FIRST SECOND <!-- <router-view></router-view> -->
Or you can nest them
LEFT CENTER RIGHT BOTTOM
Slots
firstPane
for left column or top row
secondPane
for right column or bottom row
Props
props: 'allow-resize': type: Boolean default: false 'split-to': type: String default: 'columns' // columns || rows 'primary': type: String default: 'first' // first || second 'size': type: Number default: 25 // in pixels || percents 'units': type: String default: 'pixels' // pixels || percents 'min-size': type: Number default: 16 // in pixels || percents 'max-size': type: Number default: 0 // in pixels || percents 'step': type: Number default: 0 // in pixels only 'resizerThickness': type: Number default: 2 //in px - width of the resizer 'resizerColor': type: String default: '#AAA' // any css color - if you set transparency, it will afect the border too 'resizerBorderColor': type: String default: 'rgba(0,0,0, 0.15)' // any css color - #FFF, rgb(0,0,0), rgba(0,0,0,0) 'resizerBorderThickness': type: Number default: 3 // in px - border that forms the shadow
primary
prop is used to specify which of the two panes has its size fixed.
size
prop is either width or height depending on how the panes are split.
Events added in v0.1.3
update:size
emited after resize, payload new size.
...
Props added in v0.1.0
resizerThickness
- thickness of the resize handler in normal state.
resizerColor
- color of the resize handler in normal state.
resizerBorderThickness
- thickness of the resize handler border in hover state.
resizerBorderColor
- color of the resize handler border in hover state.
License
MIT © Valentin Bucur