TileLayout

ic.TileLayout is a VSCode-style tiling layout where tabs can be dragged to the edges of a group to create new split areas. Each area is an independent tab group with its own selection. Groups merge automatically when their last tab is closed or moved away. Try dragging a tab to the left, right, top, or bottom edge of the content area below.

Interactive demo

Drag a tab to the edge of the content area to split it. Drag between tab bars to move tabs across groups. Close tabs with the X button. Resize splits by dragging the gutters.

Size

Size scales the tab headers in every group. GutterSize controls the resize handle width. DragEnabled toggles cross-group tab dragging.

Events

TabClosed fires when a tab is closed by the user. TabMoved fires when a tab is dragged to a different group. LayoutChanged fires on any structural change. Try splitting the layout and moving tabs to see events fire.

Custom styling

The tab groups use .ic-tg__bar and .ic-tg__tab for the headers, and .ic-tl__gutter for the resize handles between split areas. This example replaces the default style with a clean flat bar, rounded active tab with a soft gradient, and a gutter that highlights on hover.

tl = ic.TileLayout();
tl.addTab("Source", Icon="file-code");
tl.addTab("Preview", Icon="eye");

% Clean tab bar
tl.css.style(".ic-tg__bar", ...
    "background", "#f8fafc", ...
    "box_shadow", "none", ...
    "border_bottom", "1px solid #e2e8f0");

% Pill-shaped active tab
tl.css.style(".ic-tg__tab", ...
    "border_radius", "6px", ...
    "margin", "3px 2px", ...
    "transition", "all 0.15s ease");

tl.css.style(".ic-tg__tab--active", ...
    "background", "linear-gradient(135deg, #ede9fe, #e0e7ff)", ...
    "box_shadow", "0 1px 3px rgba(0,0,0,0.06)");

tl.css.style(".ic-tg__indicator--active", ...
    "display", "none");

% Soft gutter with hover accent
tl.css.style(".ic-tl__gutter", ...
    "background_color", "#e2e8f0");

tl.css.style(".ic-tl__gutter:hover", ...
    "background_color", "#a5b4fc", ...
    "opacity", "1");