VueSplitter | VueSplitter

Installation

INFO

VueSplitter is compatible with Vue 3 only.

Install using npm or yarn.

bash

npm i @rmp135/vue-splitter

Import the component and styling into your component.

import VueSplitter from '@rmp135/vue-splitter'

Usage

Basic

The simplest setup is shown below. By default in vertical orientation two slots are available to use, left-pane and right-pane.

Populate these with content for the respective slot.

Dragging the splitter bar will shift the content accordingly. You can continue to drag outside the container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet tellus felis. Etiam nec nunc quam. Mauris convallis felis mi, ac consequat arcu dictum ut. Nunc suscipit orci in egestas fringilla. Morbi ultricies quam sit amet mauris fringilla rhoncus. Sed efficitur ultrices ex, nec fringilla tortor egestas scelerisque. Etiam porta blandit faucibus. Pellentesque sem nunc, tincidunt nec pulvinar et, ultricies at diam. Maecenas eget eros congue, posuere nunc id, eleifend sapien. Praesent non vehicula ante. Quisque pharetra pellentesque nisl. Nunc feugiat venenatis feugiat. Maecenas euismod purus erat, a lacinia lorem tempus quis. Duis luctus tellus at laoreet tempus. Proin eu purus neque. Proin metus nunc, sollicitudin nec ornare sit amet, tempor nec mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

vue

<template>
  <vue-splitter>
    <template #left-pane>
      Left Pane content
    </template>
    <template #right-pane>
      Right Pane content
    </template>
  </vue-splitter>
</template>

Nesting

Splitter views can be nested within other splitter views. To make a splitter horizontal see the prop is-horizontal.

vue

<template>
  <vue-splitter>
    <template #left-pane>
      Left Pane content
    </template>
    <template #right-pane>
      <vue-splitter is-horizontal>
        <template #top-pane>
          Top Pane content
        </template>
        <template #bottom-pane>
          Bottom Pane content
        </template>
      </vue-splitter>
    </template>
  </vue-splitter>
</template>

Props

percent

type: Number

Binds how far, in percent of the component container, the splitter bar will be.

WARNING

When used, you must two-way bind the value using v-model:percent to allow the value to update.

Current Percent: 25

vue

<template>
  <vue-splitter v-model:percent="percent">
  ...
  </vue-splitter>
</template>
<script setup>
import { ref } from 'vue'

const percent = ref(50)
</script>

initial-percent

type: Number

Sets the initial percentage of the splitter bar. This allows for a first load static value without having to two-way bind the value.

vue

<vue-splitter initial-percent="20">
...
</vue-splitter>

is-horizontal

type: Boolean
default: false

Displays the splitter as a horizontal bar, placing content on top and below.

TIP

For ease of use, the slot names can be referred to as top-pane and bottom-pane respectively.

vue

<template>
  <vue-splitter :is-horizontal="true">
    <template #top-pane>
      Top Pane content
    </template>
    <template #bottom-pane>
      Bottom Pane content
    </template>
  </vue-splitter>
</template>

DANGER

Horizontal mode does not work well on touch screen devices. The page will insist on scrolling.

Events

update:percent

type: Number

Triggers when the splitter bar moves. See prop percent.

9:55:55:902 - 50% Drag the splitter to see the events!

vue

<vue-splitter @update:percent="onUpdatePercent">
...
</vue-splitter>

splitter-click

type: void

Triggers when the splitter bar is clicked.

Click the splitter to see the events!

vue

<vue-splitter @splitter-click="onSplitterClick">
...
</vue-splitter>

Styling

Classes are applied to the splitter container, panes and bar.

.vue-splitter - The entire component.

.vue-splitter.vertical - When the splitter is in vertical mode.

.vue-splitter.horizontal - When the splitter is in horizontal mode.

.splitter-pane - Applied to both panes.

.splitter-pane.left-pane - Container for the left pane in vertical mode.

.splitter-pane.top-pane - Container for the top pane in horizontal mode.

.splitter-pane.right-pane - Container for the right pane in vertical mode.

.splitter-pane.bottom-pane - Container for the bottom pane in horizontal mode.

.splitter - The splitter bar itself.

.splitter.active - When the bar is being actively moved.

scss

.styling.vue-splitter {
  .splitter {
    width: 30px;
    background: blue;
    &:hover {
      background: red;
    }
    &.active {
      background: green;
    }
  }
}

WARNING

Adding padding with a larger splitter bar may cause layout issues. The above limits the panes to set min widths.

Removed Props

Some props were removed from version 1 of VueSplitter to make the component more flexible. Here's how you can achieve the same result with more flexibility.

Min Width

To set the minimum width of each pane, bind a computed property to the percent prop.

The below has been limited between 20% and 60%.

Percent: 50%

vue

<template>
    <vue-splitter v-model:percent="limitedPercent" />
</template>
<script setup>
import { ref, computed } from 'vue'

const percent = ref(50)
const limitedPercent = computed({
  get() {
    return percent.value
  },
  set(val) {
    percent.value = Math.max(20, Math.min(60, val))
  }
})
</script>

Reset on Click

To reset the bar on click, listen the splitter-click event and react accordingly.

The below will reset to 50% when the splitter bar is clicked.

Percent: 25%

vue

<template>
    <vue-splitter 
      v-model:percent="percent" 
      @splitter-click="onSplitterClick"
    />
</template>
<script setup>
import { ref } from 'vue'

const percent = ref(25)

function onSplitterClick() {
  percent.value = 50
}
</script>

Installation ​

Usage ​

Basic ​

Nesting ​

Props ​

percent ​

initial-percent ​

is-horizontal ​

Events ​

update:percent ​

splitter-click ​

Styling ​

Removed Props ​

Min Width ​

Reset on Click ​