🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This is a Vue.js 2 component to create draggable, horizontal and vertical split layout.

Layout

Documentation

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

You May Also Like