vue-multi-split-pane

1.2.0 • Public • Published

Vue Multi Split Pane

A component based on Vue.js. Provides unlimited resizable multi pane support.

Demo

Live Demo | Codesandbox | JSFiddle | Codepen

Install

npm i vue-multi-split-pane

Browser

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

Example

import { MultiSplitPane, Pane } from 'vue-multi-split-pane'

export default {
  components: {
    MultiSplitPane,
    Pane
  },
  methods: {
    onPaneCollapsed(paneIndex, paneClass, containerClass) {
      console.log(
        `${paneIndex}. pane collapsed. Pane class: '${paneClass}' MultiSplitPane class: '${containerClass}'`
      )
    },
    onPaneExpanded(paneIndex, paneClass, containerClass) {
      console.log(
        `${paneIndex}. pane expanded. Pane class: '${paneClass}' MultiSplitPane class: '${containerClass}'`
      )
    }
  }
}
<MultiSplitPane
  split="horizontal"
  height="400px"
  width="1000px"
  resizerWidth="30px"
  classes="v-pane-custom"
  @onPaneCollapsed="onPaneCollapsed"
  @onPaneExpanded="onPaneExpanded"
>
  <Pane>
    <template v-slot:resizer>
      resizer slot
    </template>
    <template v-slot:content>
      Content 1
    </template>
  </Pane>
  <Pane>
    <template v-slot:content>
      Content 2
    </template>
  </Pane>
  <Pane>
    <template v-slot:content>
      Content 3
    </template>
  </Pane>
</MultiSplitPane>

Nested Pane Example

<MultiSplitPane
  split="horizontal"
  height="400px"
  width="1000px"
  resizerWidth="30px"
  :nested="true"
  classes="v-pane-custom"
>
  <Pane>
    <template v-slot:content>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    </template>
  </Pane>
  <Pane classes="paneNested">
    <template v-slot:content>
      <MultiSplitPane
        height="400px"
        resizerWidth="30px"
        classes="v-pane-custom"
      >
        <Pane>
          <template v-slot:content>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          </template>
        </Pane>
        <Pane>
          <template v-slot:content>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          </template>
        </Pane>
      </MultiSplitPane>
    </template>
  </Pane>
</MultiSplitPane>

Initial Width Example

Also initHeight props is available for vertical split.

<MultiSplitPane
  split="horizontal"
  height="400px"
  width="1000px"
  resizerWidth="30px"
  classes="v-pane-custom"
>
  <Pane initWidth="75%">
    <template v-slot:content>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur,
      excepturi in dolores accusantium praesentium quidem laborum neque ut ipsum
      veritatis ratione rem, esse totam voluptates ullam nesciunt tempora
      architecto laudantium!
    </template>
  </Pane>
  <Pane initWidth="25%">
    <template v-slot:content>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur,
      excepturi in dolores accusantium praesentium quidem laborum neque ut ipsum
      veritatis ratione rem, esse totam voluptates ullam nesciunt tempora
      architecto laudantium!
    </template>
  </Pane>
</MultiSplitPane>

Props

Prop Description value default
split Orientation of the MultiSplitPane vertical, horizontal vertical
width Width of the MultiSplitPane String 100%
height Height of the MultiSplitPane String auto
resizerWidth Width/height of the resizers. Valid for horizontal and vertical orientation. String 30px
classes Custom class prop. Can be send to MultiSplitPane or Pane String none
:nested Will you use nested MultiSplitPane? Then should be true. Boolean false
initWidth Can be used to set initial width for specific Pane component. String undefined
initHeight Can be used to set initial height for specific Pane component. String undefined

Events

Event Description
onPaneCollapsed ( paneIndex, paneClass, containerClass ) Event will be fired when collapsed any pane. Used on MultiSplitPane
onPaneExpanded ( paneIndex, paneClass, containerClass ) Event will be fired when expanded any pane. Used on MultiSplitPane

Package Sidebar

Install

npm i vue-multi-split-pane

Weekly Downloads

7

Version

1.2.0

License

MIT

Unpacked Size

65.4 kB

Total Files

9

Last publish

Collaborators

  • dgknca