1.0.1 • Published 2 years ago

vue-splitpane-pixel v1.0.1

Weekly downloads
4
License
MIT
Repository
github
Last release
2 years ago

Vue Split Pane

Split-Pane-Pixel component built with vue2.0, can be split vertically or horizontally.

Fork from https://github.com/PanJiaChen/vue-split-pane

Split-Pane-Pixel only support set pixel value.

Try the demo

How to use?

npm install vue-splitpane-pixel

#import
import splitPane from 'vue-splitpane-pixel'

# use as global component
Vue.component('split-pane', splitPane);

Example

<split-pane
  v-on:resize="resize"
  :min-size="120"
  :default-size="300"
  :max-size="1000"
  split="vertical"
>
  <template slot="paneL"> A </template>
  <template slot="paneR"> B </template>
</split-pane>
//nested
<split-pane
  v-on:resize="resize"
  :min-size="120"
  :default-size="300"
  :max-size="1000"
  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

PropertyDescriptiontypedefault
splitthe split typeString horizontal,verticalmust choose one type
min-sizepaneL min-sizeNumber100
max-sizepaneL max-sizeNumber0 (not set)
default-sizepaneL default sizeNumber250

License

MIT