splitpanes

What is splitpanes?

The splitpanes npm package is a Vue.js component that allows you to create resizable, split views or panes within your application. It is useful for creating layouts where you need to divide the screen into multiple resizable sections.

What are splitpanes's main functionalities?

Basic Split Pane

This code demonstrates a basic usage of the splitpanes component with two resizable panes. The panes can be resized by dragging the divider between them.

<template>
  <splitpanes>
    <pane>Pane 1</pane>
    <pane>Pane 2</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';

export default {
  components: {
    Splitpanes,
    Pane
  }
};
</script>

Nested Split Panes

This code demonstrates how to nest splitpanes within each other to create more complex layouts. The outer splitpanes component contains two panes, with the first pane containing another splitpanes component.

<template>
  <splitpanes>
    <pane>
      <splitpanes>
        <pane>Nested Pane 1</pane>
        <pane>Nested Pane 2</pane>
      </splitpanes>
    </pane>
    <pane>Pane 2</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';

export default {
  components: {
    Splitpanes,
    Pane
  }
};
</script>

Horizontal Split Panes

This code demonstrates how to create horizontal split panes by adding the 'horizontal' attribute to the splitpanes component. The panes can be resized horizontally by dragging the divider.

<template>
  <splitpanes horizontal>
    <pane>Pane 1</pane>
    <pane>Pane 2</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';

export default {
  components: {
    Splitpanes,
    Pane
  }
};
</script>

Other packages similar to splitpanes

vue-split-panel

vue-split-panel is another Vue.js component for creating resizable split panels. It offers similar functionality to splitpanes but with a different API and styling options. It is also easy to use and integrates well with Vue.js applications.

react-split-pane

react-split-pane is a React component for creating resizable split views. While it is designed for React rather than Vue.js, it offers similar functionality to splitpanes, allowing developers to create flexible, resizable layouts in their React applications.

golden-layout

golden-layout is a powerful layout manager for web applications that allows you to create complex, resizable layouts with multiple panes. It is framework-agnostic and can be used with various front-end frameworks, including Vue.js and React. It offers more advanced features compared to splitpanes, such as drag-and-drop support and dynamic pane creation.

README

Splitpanes

A Vue.js reliable, simple and touch-ready panes splitter / resizer. Vue 3 compatible.

Installation

Vue 3

npm i splitpanes

Vue 2

npm i splitpanes@legacy

---

Demo & Documentation

https://antoniandre.github.io/splitpanes

Try it yourself

https://codepen.io/antoniandre/pen/XybPKP

---

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	10+ ✔

---

Donating

If you like this library, you can buy me a beer or become a sponsor!

Thank you!

If you are using this library for profit business, please consider backing me! It ensures that the project your products rely on keeps being actively maintained. :)

---

Contributing

If you have any idea, feel free to open an issue to discuss a new feature, or fork Splitpanes and submit your changes back to me.

---

Release Notes

• Version 2.3.0 Support rtl direction
• Version 2.2.0 Add firstSplitter option allow v-if on panes and other improvements
• Version 2.0.0 Fix reactivity issues
• Version 1.14.0 Programmatically set pane size
• Version 1.13.0 Emit event on splitter click
• Version 1.12.0 Double click splitter to maximize is now an option
• Version 1.11.0 Persist panes size after slots changed
• Version 1.10.0 Add maximum size feature on panes
• Version 1.9.0 Emit event on resize & watch slots optional
• Version 1.8.0 Watch slots
• Version 1.7.0 Double click splitter to maximize next pane
• Version 1.6.0 Emit events
• Version 1.5.0 Add default size feature on panes (max feature coming soon!)
• Version 1.4.0 Add minimum size feature on panes
• Version 1.3.0 Splitpanes slots are now reactive (add/remove on the fly)
• Version 1.2.0 Add a default-theme CSS class to load default theme
• Version 1.1.0 Allow pushing other panes while dragging splitter
• Version 1.0.0 First public release