vue-splitter

For splitting a Vue in two!

Demo

Installing

Install from npm.

yarn add @rmp135/vue-splitter

Import the component.

import VueSplitter from "@rmp135/vue-splitter"

Include it in the components section of the vue component.

components: {
  VueSplitter
}

Use it in the html, populating the left-pane and right-pane slots.

<vue-splitter :margin="20">
  <div slot="left-pane">
    <div>Some left content here.</div>
  </div>
  <div slot="right-pane">
    <div>Some right content here.</div>
  </div>
</vue-splitter>

The margin prop can be used to set the percentage that the dragger should not exceed on either side. Defaults to 10%.

The horizontal prop will create a horizontal splitter bar. Defaults to false. Note: An ancestor element (parent, parents parent etc) must have a fixed height for the horizontal splitter to work properly.

The resize event will be fired when the dragger is moved.

Using

The dragger can be dragged left and right to move the panes. It can be clicked to reset to 50%.

Styles

The following classes may be overridden to apply the style you would like.

The component is wrapped in a .vue-splitter class.

Each pane has a .splitter-pane class, with a .left-pane and .right-pane class respectively (corresponds to top and bottom panes for horizontal splitting).

The splitter bar has a .splitter class.