vue2-split-panel

this is a schedule selector for vue

Usage no npm install needed!

<script type="module">
  import vue2SplitPanel from 'https://cdn.skypack.dev/vue2-split-panel';
</script>

README

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