Description:
A multi split view component used to generate a resizable, vertical and/or horizontal split layout in your app.
Basic usage:
1. Import the register the component.
import { MultiSplitPane, Pane } from 'vue-multi-split-pane';
export default { components: { MultiSplitPane, Pane // ... } }
2. Create a basic horizontal split layout.
<MultiSplitPane split="horizontal" height="400px" width="1000px" resizerWidth="30px" classes="v-pane-custom" @onPaneCollapsed="onPaneCollapsed" @onPaneExpanded="onPaneExpanded" > <Pane> <template v-slot:resizer> Resizer 1 </template> <template v-slot:content> Content 1 </template> </Pane> <Pane> <template v-slot:content> Content 2 </template> </Pane> <Pane> <template v-slot:content> Content 3 </template> </Pane> </MultiSplitPane>
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}'` ) } } }
3. The split layout also supports nested panes.
<MultiSplitPane split="horizontal" height="400px" width="1000px" resizerWidth="30px" classes="v-pane-custom" :nested="true" @onPaneCollapsed="onPaneCollapsed" @onPaneExpanded="onPaneExpanded" > <Pane> <template v-slot:content> Content 1 </template> </Pane> <Pane classes="paneNested"> <template v-slot:content> <MultiSplitPane height="400px" resizerWidth="30px" classes="v-pane-custom" > <Pane> <template v-slot:content> Content 2.1 </template> </Pane> <Pane> <template v-slot:content> Content 2.2 </template> </Pane> </MultiSplitPane> </template> </Pane> </MultiSplitPane>
4. All default components:
height: { type: String, required: true }, width: { type: String, default: '100%' }, classes: { type: String }, split: { type: String, default: 'vertical' }, resizerWidth: { type: String, default: '30px' }, nested: { type: Boolean, default: false }
Preview:
Changelog:
v1.2.0 (01/01/2021)
- initWidth and initHeiht props
v1.1.2 (11/28/2020)
- browser support added
11/17/2020
- added browser build
Download Details:
Author: dgknca
Live Demo: https://vue-multi-split-pane.vercel.app/
Download Link: https://github.com/dgknca/vue-multi-split-pane/archive/master.zip
Official Website: https://github.com/dgknca/vue-multi-split-pane
Install & Download:
# NPM
$ npm i vue-multi-split-pane --save