Vue Multi Split Pane

A component based on Vue.js. Provides unlimited resizable multi pane support.

Demo

Live Demo | Codesandbox | JSFiddle | Codepen

$3

``bash
npm i vue-multi-split-pane
`

$3

`html

`

$3

`js
import { MultiSplitPane, Pane } from 'vue-multi-split-pane'

export default {
components: {
MultiSplitPane,
Pane
},
methods: {
onPaneCollapsed(paneIndex, paneClass, containerClass) {
console.log(
${paneIndex}. pane collapsed. Pane class: '${paneClass}' MultiSplitPane class: '${containerClass}'
)
},
onPaneExpanded(paneIndex, paneClass, containerClass) {
console.log(
${paneIndex}. pane expanded. Pane class: '${paneClass}' MultiSplitPane class: '${containerClass}'
)
}
}
}
`

`html
split="horizontal"
height="400px"
width="1000px"
resizerWidth="30px"
classes="v-pane-custom"
@onPaneCollapsed="onPaneCollapsed"
@onPaneExpanded="onPaneExpanded"
>











`

$3

`html
split="horizontal"
height="400px"
width="1000px"
resizerWidth="30px"
:nested="true"
classes="v-pane-custom"
>







`

$3

Also initHeight props is available for vertical split.

`html
split="horizontal"
height="400px"
width="1000px"
resizerWidth="30px"
classes="v-pane-custom"
>







``

Props

| Prop | Description | value | default |
| :----------- | :--------------------------------------------------------------------------- | :------------------: | :-------: |
| split | Orientation of the MultiSplitPane | vertical, horizontal | vertical |
| width | Width of the MultiSplitPane | String | 100% |
| height | Height of the MultiSplitPane | String | auto |
| resizerWidth | Width/height of the resizers. Valid for horizontal and vertical orientation. | String | 30px |
| classes | Custom class prop. Can be send to MultiSplitPane or Pane | String | none |
| :nested | Will you use nested MultiSplitPane? Then should be true. | Boolean | false |
| initWidth | Can be used to set initial width for specific Pane component. | String | undefined |
| initHeight | Can be used to set initial height for specific Pane component. | String | undefined |

Events

| Event | Description |
| :------------------------------------------------------- | :------------------------------------------------------------------ |
| onPaneCollapsed ( paneIndex, paneClass, containerClass ) | Event will be fired when collapsed any pane. Used on MultiSplitPane |
| onPaneExpanded ( paneIndex, paneClass, containerClass ) | Event will be fired when expanded any pane. Used on MultiSplitPane |