Adjustable split pane using Vue.js

vue-split-pane

Adjustable split pane using Vue.js

Install

# yarn (recommend)
$ yarn add vue-split-pane

# npm
$ npm install vue-split-pane --save

Usage

CDN

<script src="https://unpkg.com/vue-split-pane"></script>

.vue files

<template>
  <div class="app">
    <split-pane>
      <section slot="left">Left Pane</section>
      <section slot="right">Right Pane</section>
    </split-pane>
  </div>
</template>

<script>
import SplitPane from 'vue-split-pane'

export default {
  components: { SplitPane }
}
</script>

<!-- optionally use our default style -->
<style src="vue-split-pane/themes/default.css"></style>

Slot

Name	Description
left	The content of left pane
right	The content of right pane

Build Setup

You can use vue-cli with vue-rollup-boilerplate templates or other vue templates

Download Details:

Author: dangvanthanh

Demo: http://vue-split-pane.surge.sh/

Source Code: https://github.com/dangvanthanh/vue-split-pane

#vuejs #vue #vue-js #javascript