vue-splitpane
vue split-pane component
388,519
553
| Install | |
|---|---|
npm install vue-splitpane |
|
| Latest Version: | 1.0.6 |
| License: | MIT |
| Last Updated: | Oct 7, 2020 |
| Links: | GitHub · npm |
Maintainer: panjiachen
Vue Split Pane
Split-Pane component built with vue2.0, can be split vertically or horizontally.
Try the demo
How to use?
npm install vue-splitpane
#import
import splitPane from 'vue-splitpane'
# use as global component
Vue.component('split-pane', splitPane);
Example
<split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
<template slot="paneL">
A
</template>
<template slot="paneR">
B
</template>
</split-pane>
//nested
<split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
<template slot="paneL">
A
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL">
B
</template>
<template slot="paneR">
C
</template>
</split-pane>
</template>
</split-pane>
Options
| Property | Description | type | default |
|---|---|---|---|
| split | the split type | String [horizontal,vertical] | must choose one type |
| min-percent | paneL max-min-percent | Number | 10 |
| max-percent | paneL max-percent | Number | 10 |
Version History
| Version | Released | License |
|---|---|---|
| 1.0.6 | MIT | |
| 1.0.5 | MIT | |
| 1.0.4 | MIT | |
| 1.0.2 | MIT | |
| 1.0.1 | MIT | |
| 1.0.0 | MIT |