A Vue.js component for creating reliable, simple, and touch-ready resizable split panes.
Splitpanes is a Vue.js component library for creating resizable split-pane layouts in web applications. It solves the problem of building flexible UI layouts with draggable dividers that work reliably across desktop and touch devices. The component handles complex interactions like dynamic pane management, size constraints, and responsive behavior.
Vue.js developers building applications that require adjustable layout areas, such as dashboards, code editors, admin panels, or any interface with resizable panels.
Developers choose Splitpanes for its simplicity, reliability, and excellent touch support compared to building custom split-pane solutions. It offers a minimal API with powerful features like reactive slots, programmatic control, and strong browser compatibility.
A Vue 3 (and 2) reliable, simple and touch-ready panes splitter / resizer.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Fully supports touch interactions for mobile and tablet devices, making it ideal for responsive web applications, as highlighted in the 'Touch-Ready' feature.
Panels can be dynamically added, removed, or updated using Vue's reactivity system, enabling live layout changes without manual DOM manipulation, as noted in the 'Reactive Slots' feature.
Works consistently across modern browsers including IE10+, ensuring wide accessibility and reducing cross-browser testing overhead, as stated in the browser support section.
Offers configurable splitter actions like double-click to maximize and push-mode dragging, providing flexible user interaction options, as detailed in the 'Customizable Splitters' feature.
Limited to Vue.js ecosystems and not usable with other JavaScript frameworks without significant adaptation, restricting its applicability in multi-framework projects.
Requires custom CSS for styling as the library focuses on functionality, with only a 'default-theme' class provided, adding development overhead for polished interfaces.
Installation differs for Vue 2 (using a legacy package) and Vue 3, which can cause confusion and version management issues during setup, as indicated in the installation instructions.