1.0.0 • Published 3 years ago

sin-vue-splitpane v1.0.0

Weekly downloads
47
License
MIT
Repository
-
Last release
3 years ago

Vue Split Pane

Split-Pane component built with vue2.0, can be split vertically or horizontally,and change the size dynamically.

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 @resize="resize" :set-percent="value" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        B
      </template>
    </split-pane>
  //nested
   <split-pane @resize="resize" :set-percent="value" :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

PropertyDescriptiontypedefault
splitthe split typeString horizontal,verticalmust choose one type
min-percentpaneL min-percentNumber10
max-percentpaneL max-percentNumber90
set-percentdynamic change paneL valueNumber10