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

Yet another vue.js component to create a drag’n’drop split layout for your app.

Layout

Documentation

vue-split-layout

vue split drag layout

https://vue-hxs.github.io/vue-split-layout/

Install

npm install --save vue-split-layout

Usage

... <template>   <div id="app">   <Layout :resize="true" :edit="true" :splits="tree">     <div class="view1"></div> <!-- 0 - view -->     <Pane title="pane">content</Pane> <!-- 1 - view -->     <div class="view2"></div> <!-- 2 - view -->   </Layout>    </div> </template> <script> import {Layout,Pane} from 'vue-split-layout' export default {     components: {Layout}     data () {       return {         tree: {           dir: 'horizontal', // Left | Right           // Other split           first: {             dir: 'vertical',             first: 0,    // these numbers represents the views slot ID             second: 2           },           second: 1         }      }   } } </script> ...

TODO

  • Better way for naming views instead of their indexes
  • Improve rendering, if a view state(props) is update outside layout, the view isn't updated
  • Persist creating an change $emit with possibily the tree json (also for split)
  • Makes views draggable from some menu so we can add new views

You May Also Like