Skip to content

Latest commit

 

History

History
120 lines (100 loc) · 3.44 KB

README.md

File metadata and controls

120 lines (100 loc) · 3.44 KB
Raw

Vue Splitter Pane

Demo

vue-splitter-pane is a Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal).

Uses flex-box for sizing.

Installation & Usage

$ npm install vue-splitter-pane

Vue Global Usage

import VueSplitter from 'vue-splitter-pane'
Vue.use(VueSplitter); # registers vue-splitter, vue-splitter-v and vue-splitter-h

Vue Local Usage

import VueSplitter, {VueSplitterH, VueSplitterV} from 'vue-splitter-pane'
Vue.extend({
  ...,
  components:  {
    VueSplitter,       // registers vue-splitter, must provide orientation
    VueSplitterV,      // registers vue-splitrer-v, for side by side arrangement
    VueSplitterH       // registers vue-splitter-h for top/bottom arrangement
  }
})

Examples

Using vue-splitter

<vue-splitter split="vertical">
  <template slot="left">
    content...
  </template>
  <template slot="right">
    content...
  </template>
</vue-splitter>

Using vue-splitter-h

<vue-splitter-h>
   <template slot="top">
    content...
   </template>
   <template slot="bottom">
    content...
   </template>
 </vue-splitter>

Nested

<vue-splitter-v initial-size="40%">
  <template slot="left"> A </template>
  <template slot="right">
    <vue-splitter-h>
      <template slot="top">
        <vue-splitter-v initial-size="60%">
          <template slot="left">B</template>
          <template slot="right">C</template>
        </vue-splitter-v>
      </template>
      <template slot="bottom">
        <vue-splitter-v :throttle="20" initial-size="200px">
          <template slot="left">D</template>
          <template slot="right">E</template>
        </vue-splitter-v>
      </template>
    </vue-splitter-h>
  </template>
</vue-splitter-v>

Slot Names

Splitter Type First Slot Second Slot
vertical left right
horizontal top bottom

Events

  • resize([size1, size2]): Emitted when the panes are resized. size1 and size2 are the adjusted dimensions of the first and second pane, respectively (width for vertical and height for horizontal).

Component Properties

Property Description type default
split Pane arrangement horizontal , vertical required
initial-size Initial size of first slot Any valid CSS size (e.g. px, %) 50%
min-size Lower size bound for the first slot Any valid CSS size (e.g. px, % ) 20%
min-size Upper size bound for the first slot Any valid CSS size (e.g. px, %) 80%
throttle Throttle size updates to no more than given value Rate in ms -
x-class Adds a classname string -

Styling

vue-splitter-pane includes the bare minimal styling to ensure functionality.

Container

  • .VueSplitter-Container-item: the container
  • .VueSplitter-Container-[horizontal|vertical]: specialization for split type
  • value set via x-class

Panes

  • .VueSplitter-Pane-item: the pane
  • .VueSplitter-Pane-[left|right|top|bottom]: specialization by position
  • value set via x-class

Handle

  • .VueSplitter-Handle-item: the handle
  • .VueSplitter-Handle-[horizontal|vertical]: specialization by split type
  • value set via x-class