TabsLayout

A horizontal tab layout component for organizing content into multiple pages.

TabsLayout provides a tab-based interface with clickable tab headers that can switch between different content views. It supports visual feedback for hover and selection states, individual tab themes, and disabled tabs. The layout automatically manages tab positioning, borders, and background rendering.

Key features:

• Clickable tab headers with hover effects
• Individual tab theming and state management
• Disabled tab support
• Automatic border and background management
• Integration with window systems
• Configurable margins and spacing
• Depth-based tab ordering for visual layering

Usage example:

var tabsLayout = new TabsLayout();
tabsLayout.tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
tabsLayout.selectedIndex = 0;
tabsLayout.marginX = 5;
tabsLayout.marginY = 2;

tabsLayout.onSelectedIndexChange(this, (index, prev) -> {
    trace('Selected tab: ' + index);
    // Switch content based on selected tab
});

add(tabsLayout);

Instance Members #

Default is false, automatically set to true when any of this instance's observable variables has changed.

Custom theme override for this tabs layout. If null, uses the global context theme

Horizontal margin extending beyond the tabs layout bounds.

This margin affects border and background rendering, extending the visual elements beyond the actual tab bounds for seamless integration with surrounding content.

Vertical margin extending beyond the tabs layout bounds.

This margin affects border and background rendering, extending the visual elements beyond the actual tab bounds for seamless integration with surrounding content.

Reference to the WindowItem managing this tabs layout, if applicable.

When the tabs layout is managed by a WindowItem, this property provides access to the window context for coordination and event handling.

Index of the currently selected tab. -1 means no tab is selected

Array of tab labels to display in the tab headers

Array of states for each tab (NORMAL, DISABLED, etc.)

Array of custom themes for individual tabs. Uses default theme if null for a tab

Creates a new TabsLayout.

Sets up the basic layout properties, creates border elements, and initializes automatic updates for tab management and styling. Configures the layout for overlapping tabs with custom depth management.

Private Members #

Internal array of TextView components representing the tab headers

Index of the tab currently being hovered by the mouse. -1 means no hover

Cache of previously applied tab labels for change detection

Border element rendered before the selected tab

Border element rendered after the selected tab

Background element rendered before the selected tab area

Background element rendered after the selected tab area

Background element rendered above the tabs

Background element rendered below the tabs

Event when any observable value as changed on this instance.

Event when theme field changes.

Event when selectedIndex field changes.

Event when tabs field changes.

Event when tabStates field changes.

Event when tabThemes field changes.

Event when tabViews field changes.

Event when hoverIndex field changes.

Updates the tab views based on the current tabs array.

Creates new TextView components for new tabs, removes unused tab views, and updates the visual hierarchy. This method is called automatically when the tabs array changes.

Indicates whether this tabs layout should render window background.

This method is used by the window system to determine background rendering behavior. Always returns true for tabs layouts.

Initializes event handlers and behavior for a tab view.

Sets up hover tracking, click/touch handling for tab selection, and automatic touchable state management based on tab state.

Performs layout of tab views and manages visual depth ordering.

Updates tab depth values to create proper visual layering with the selected tab on top, positions border elements around the selected tab, and manages background element positioning based on margins and selection state.

Updates the visual style of all tabs and background elements.

Applies theme-based styling to tab views based on their state (selected, hovered, disabled, normal). Manages border colors, background colors, text colors, and transparency. Also handles creation and destruction of background elements based on theme settings.

Metadata #