Splitter

ic.Splitter is a resizable split pane container. It divides space into panes separated by draggable gutters. Each pane is created with addPane and is itself a container that holds child components. Panes have percentage-based sizing with configurable min/max constraints and snap behavior.

Direction

Direction controls the split orientation. horizontal places panes side by side with vertical gutters. vertical stacks them with horizontal gutters.

Pane sizing

Each pane has Size (percentage of total space), MinSize, and MaxSize. When Size is left unset (NaN in MATLAB), the pane auto-fills the remaining space. SnapSize adds a snap threshold: when a pane is dragged within MinSize + SnapSize, it snaps to its minimum, giving collapsible-sidebar behavior without extra code. Use the controls to configure the left pane, then drag the gutter to see constraints and snapping in action.

Gutter size

GutterSize controls the width (or height, in vertical mode) of the draggable divider in pixels. Wider gutters are easier to grab. The gutter has a knurl grip pattern that follows the framework’s Industrial Flat design.

Events

Resized fires after the user finishes dragging a gutter. The payload contains a sizes array with the new percentage sizes of all panes.

Custom styling

The gutter is the main styling target: .ic-splitter-gutter for the divider itself, and its ::before pseudo-element for the knurl grip. This example replaces the recessed channel with a thin colored line and swaps the grip texture for a pair of arrow indicators.

sp = ic.Splitter();
sp.addPane(Size=40);
sp.addPane(Size=60);

% Thin orange divider line
sp.css.style(".ic-splitter-gutter", ...
    "width", "3px", ...
    "background_color", "#f97316", ...
    "box_shadow", "none", ...
    "overflow", "visible");

% Left arrow
sp.css.style(".ic-splitter-gutter::before", ...
    "content", "'\25C2'", ...
    "position", "absolute", ...
    "top", "50%", "right", "100%", ...
    "transform", "translateY(-50%)", ...
    "background", "none", ...
    "font_size", "14px", ...
    "color", "#f97316", ...
    "opacity", "1");

% Right arrow
sp.css.style(".ic-splitter-gutter::after", ...
    "content", "'\25B8'", ...
    "position", "absolute", ...
    "top", "50%", "left", "100%", ...
    "transform", "translateY(-50%)", ...
    "font_size", "14px", ...
    "color", "#f97316");