UI Splitter

UI Splitter is a lightweight and reusable div-based splitter component that supports vertical and horizontal splits with collapse/expand functionality. It is designed to work seamlessly across jQuery, React, and Angular projects.

Installation

Install the package via npm:

npm install ui-splitter

Usage

jQuery / Vanilla JS

const UISplitter = require('ui-splitter');

const splitter = new UISplitter('div1', 'div2', {
    percentage1: 70,
    percentage2: 30,
    direction: 'horizontal', // 'horizontal' or 'vertical'
    collapsed: true // Set to true to collapse by default
});

React

import React, { useEffect } from 'react';
import UISplitter from 'ui-splitter';

const MyComponent = () => {
    useEffect(() => {
        const splitter = new UISplitter('div1', 'div2', {
            percentage1: 50,
            percentage2: 50,
            direction: 'vertical',
        });
    }, []);

    return (
        <div>
            <div id="div1">Panel 1</div>
            <div id="div2">Panel 2</div>
        </div>
    );
};

export default MyComponent;

Angular

import { Component, AfterViewInit } from '@angular/core';
import * as UISplitter from 'ui-splitter';

@Component({
  selector: 'app-root',
  template: '<div id="div1">Panel 1</div><div id="div2">Panel 2</div>'
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    const splitter = new UISplitter('div1', 'div2', {
      percentage1: 60,
      percentage2: 40,
      direction: 'horizontal'
    });
  }
}

Options

• percentage1: Size of the first panel in percentage.
• percentage2: Size of the second panel in percentage.
• minSize1: Minimum size of the first panel (default: 100px).
• minSize2: Minimum size of the second panel (default: 100px).
• direction: 'horizontal' or 'vertical' split direction.
• gutterSize: Size of the gutter between panels (default: 10px).
• collapseButtonVisible: Show collapse button (default: true).
• collapsed: Whether to start with the panel collapsed (default: false).

License

This package is open-source under the MIT license. Feel free to use and modify it!