UI Toolbox logoUI Toolbox

NavigableTabView

NavigableTabView in UIToolbox is the native TabView with keyboard and gamepad support. Native tab headers cannot take focus, so only the mouse can change the tab. NavigableTabView takes focus as one element. The arrow keys and the gamepad directions along the headers then select the previous or next tab. Use it for tabs inside a window; window tabs are TabStrip.

<tb:NavigableTabView reorderable="true">
    <ui:Tab label="Audio">...</ui:Tab>
    <ui:Tab label="Video">...</ui:Tab>
    <ui:Tab label="Network" enabled="false" />
    <ui:Tab label="Log" closeable="true">...</ui:Tab>
</tb:NavigableTabView>
Member Description
SelectNext(step) Selects the next enabled tab in the direction of step (-1 or 1). After the last tab comes the first. Returns false when no other tab is enabled.
SetTabEnabled(tab, enabled) Enables or disables a tab and its header. Use it in place of tab.SetEnabled, which leaves the header enabled.
SetAttention(tab, on) Makes the header of a tab flash until the user selects the tab. The selected tab does not flash.
HasAttention(tab) True while the header flashes.
SetBadge(tab, text, tone) Shows a Badge after the label of the header, such as a count of new messages. An empty text removes it. The badge stays when the user selects the tab. Returns the badge.
Everything of TabView selectedTabIndex, activeTabChanged, reorderable, tabReordered, tabClosed, GetTab, GetTabHeader.

Attention and badges

var mail = tabs.GetTab(2);
tabs.SetAttention(mail);                       // the header flashes until the user selects the tab
tabs.SetBadge(mail, "5", BadgeTone.Error);     // a red "5" after the label
tabs.SetBadge(mail, "");                       // removes the badge

For a tab with a color of its own, add a class to tab.tabHeader and style it. The flash color is --tb-tab-attention-color (default --tb-color-warning).

Styling

Class Element
tb-tab-view The tab view. It also has the native unity-tab-view classes, so the workspace TabView rules apply.
tb-attention, tb-attention--on A header while it flashes; the second class goes on and off.
tb-tab-view__badge The badge of a header.
unity-tab__header:disabled The header of a disabled tab: opacity: 0.45 and an italic --tb-color-text-disabled label.
tb-tab-view:focus … unity-tab__header:checked The checked header while the tab view has focus: --tb-color-accent with an --tb-color-accent-text label. The selectors go child by child, so a TabView inside a tab keeps its look.