Splitter

The Splitter component is a layout controller that divides a container's child panels into resizable vertical or horizontal sections. Users can drag the gutters between panels to adjust their sizes.

1. Basic Horizontal Splitter

A simple side-by-side splitter layout.

Left Panel

This panel is initially set to 40% width. Drag the gutter to resize.

Right Panel

This panel occupies the remaining 60% space.

2. Nested Viewport Workspace Layout (North, East, South, West, Center)

An application workspace layout made by nesting horizontal splitters inside a vertical splitter.

⬆️ North Area (Header Toolbar) Height: 15%

⬅️ West Sidebar

💻 Center Main Workspace

Drag the handles surrounding this box to scale sidebar/header bounds in real-time!

➡️ East Sidebar

⬇️ South Area (Status Bar) Ready

<!-- Nested Workspace Layout -->
<div style="height: 400px; border: 1px solid var(--secondary-color);">
    
    <!-- Root Splitter: Split Vertically -->
    <div data-role="splitter" data-split-mode="vertical" data-split-sizes="15, 70, 15" style="height: 100%;">
        
        <!-- North Panel -->
        <div>North Panel Content</div>

        <!-- Middle Content (Nested Horizontal Splitter) -->
        <div>
            <div data-role="splitter" data-split-mode="horizontal" data-split-sizes="20, 60, 20" style="height: 100%;">
                <div>West Sidebar</div>
                <div>Center Workspace</div>
                <div>East Sidebar</div>
            </div>
        </div>

        <!-- South Panel -->
        <div>South Statusbar</div>

    </div>
</div>

Usage Reference & API Options

Configure splitter behavior declaratively using these HTML attributes on the splitter container:

Attribute	Values	Description
data-role="splitter"	HTML Attribute	Identifies element for automatic splitter compilation scan.
data-split-mode	`horizontal` \| `vertical`	Sets layout dragging direction. Defaults to `horizontal`.
data-split-sizes	Comma integers (e.g. `"30, 70"`)	Initial percentages for child panels. Must match count of direct child elements.
data-min-sizes	Comma integers (e.g. `"100, 150"`)	Minimum sizes (in pixels) for panels to restrict drag boundaries. Defaults to `50`.