TabContainer

ic.TabContainer is a tabbed layout container with closable, renamable, and reorderable tabs. Each tab is created with addTab, which returns a panel (the content container) and a tab handle (the header configuration). The component supports three overflow modes, drag-to-reorder, inline tab renaming, per-tab icons and disabled states, and keyboard navigation.

Tab overflow

TabOverflow controls how tabs behave when they don’t fit in the bar. scroll keeps them in a single row with a horizontal scrollbar. wrap breaks them into multiple rows. menu hides overflowed tabs behind a >> chevron dropdown. Resize the browser to see the effect with many tabs.

Size

Size scales the tab headers. The three options are sm, md, and lg. Panel content is not affected.

Tab features

Each tab supports Closable (shows an X button), Editable (double-click to rename), and Icon (Lucide icon name or any ic.Asset). DragEnabled on the container controls whether tabs can be reordered by dragging. Try double-clicking a tab label to rename it, or drag a tab to a new position.

Events

TabContainer fires four events. ValueChanged when a tab is selected. TabClosed when a tab’s close button is clicked (the tab is automatically removed). TabReordered after a drag-and-drop. TabRenamed after an inline label edit.

Custom styling

The tab bar uses .ic-tc__bar for the strip, .ic-tc__tab for each header, .ic-tc__tab--active for the selected state, and .ic-tc__indicator for the left accent bar. This example turns the tabs into pill-shaped buttons with a gradient highlight and a floating shadow on the active tab.

tc = ic.TabContainer();
tc.addTab("Source", Icon="file-code");
tc.addTab("Build", Icon="hammer");
tc.addTab("Output", Icon="terminal");

% Transparent bar with padding for pill tabs
tc.css.style(".ic-tc__bar", ...
    "background", "transparent", ...
    "box_shadow", "none", ...
    "border_bottom", "none", ...
    "padding", "6px 8px", ...
    "gap", "4px");

% Pill-shaped tabs
tc.css.style(".ic-tc__tab", ...
    "border_radius", "20px", ...
    "padding", "5px 14px", ...
    "transition", "all 0.2s ease");

% Gradient active pill
tc.css.style(".ic-tc__tab--active", ...
    "background", "linear-gradient(135deg, #6366f1, #8b5cf6)", ...
    "color", "#fff", ...
    "box_shadow", "0 2px 8px rgba(99, 102, 241, 0.35)");

% Hide the left indicator
tc.css.style(".ic-tc__indicator", ...
    "display", "none");

% Hover glow on inactive tabs
tc.css.style(".ic-tc__tab:hover", ...
    "background_color", "rgba(99, 102, 241, 0.08)");