vue-panel-split

A split-panel component with draggable splitter for Vue.js, can be either horizontal or vertical.

Demo Here

Install

npm install vue-panel-split --save

Usage

<template>
    <div class="app">
        <split-panel :layout="'horizontal'" :gutter="10" :init="30" :min="10" :max="90">
            <div slot="1">
                I'm panel 1
            </div>
            <div slot="2">
                I'm panel 2
            </div>
        </split-panel>
    </div>
</template>
<script>
import splitPanel from 'vue-panel-split'

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

Optional Attributes

name	description	values	default
layout	layout of the panel	'horizontal' or 'vertical'	'horizontal'
gutter	gutter width in px	arbitrary	8
init	initial width percentage of the first panel	0 to 100	50
min	minimum width percentage of the first panel	0 to 100	0
max	maximum width percentage of the first panel	0 to 100	100

License

MIT