1.0.1 • Published 4 years ago
vue2-split-panel v1.0.1
Vue Split Panel
Split-Pane component built with vue2.0, can be split vertically or horizontally.
How to use?
npm install vue2-split-panel
#import
import splitPane from 'vue2-split-panel'
# use as global component
Vue.component('split-pane', splitPane);
Example
<split-pane v-on:resize="resize" :min-width='20' :default-width='30' split="vertical">
<template slot="paneL">
A
</template>
<template slot="paneR">
B
</template>
</split-pane>
<split-pane v-on:resize="resize" :min-width='20' :default-width='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(px) |
---|---|---|---|
split | the split type | String horizontal,vertical | must choose one type |
max-width | max-width | Number | 300 |
min-width | min-width | Number | 100 |
defaultWidth | width | Number | 200 |