How-To: Tabs

Goal: a tab bar (settings screen, inventory categories) with design-time tabs, runtime-registered tabs, and per-tab content widgets.

Prerequisites
A screen to host the tabs and a UCrimsonButtonBase subclass to use as the tab button (see How-To: Buttons & Action Glyphs).

1. Make the tab button

Create a Blueprint from Crimson Tab Button Base (UCrimsonTabButtonBase). It already implements ICrimsonTabButtonInterface; override the Set Tab Label Info event to receive an FCrimsonTabDescriptor (TabId, TabText, IconBrush) and populate your label/icon.

Reference implementation
Open the shipped W_CrimsonButtonTab (/CrimsonUI/UI/Foundation/Buttons/) - a working tab button. Its graph is the whole pattern: Event Set Tab Label Info -> Break CrimsonTabDescriptor -> Set Text (Tab Text) and Set Brush (Icon Brush).

2. Make the tab list and preregister tabs

Create a Blueprint from Crimson Tab List Widget Base (UCrimsonTabListWidgetBase, a UCommonTabListWidgetBase). Fill PreregisteredTabInfoArray in Class Defaults - one FCrimsonTabDescriptor per design-time tab: TabId (unique FName), TabText, IconBrush, TabButtonType (your WBP_TabButton), and TabContentType (the UCommonUserWidget page shown while the tab is active). Then, as with any CommonUI tab list, call Set Linked Switcher (pointing at a UCommonActivatableWidgetSwitcher in your screen) before tabs are created - content widgets are instantiated into it.

Reference implementation
Open the shipped W_CrimsonHorizontalTabList (/CrimsonUI/UI/Foundation/TabbedView/) - a working tab list whose Tab Button Type is W_CrimsonButtonTab. Duplicate it and fill PreregisteredTabInfoArray with your own entries (e.g. Graphics / Audio / Controls, each pairing your tab button with its page widget).
Verify
PIE: the tab bar shows one button per preregistered entry; selecting a tab switches the linked switcher to that tab's content widget.

3. Register tabs at runtime

Node chain: Make CrimsonTabDescriptor (Tab Id = Mods, Tab Text = Mods, Tab Button Type, Tab Content Type) -> Register Dynamic Tab on the tab list. The node returns false if registration failed.

Runtime helpers (all BlueprintCallable): SetTabHiddenState(TabId, bHidden), IsTabVisible(TabId), GetVisibleTabCount(), GetTabContentForId(TabId), IsFirstTabActive() / IsLastTabActive() (for prev/next bumper logic), GetPreregisteredTabInfo(TabId). Bind OnTabContentCreated to touch each content widget as it is instantiated.

Verify
The dynamic tab appears after registration; hiding it with Set Tab Hidden State removes the button but keeps its registration.

See also

  • How-To: Buttons & Action Glyphs - the tab button's base class.
  • How-To: Push & Pop Screens - hosting the tabbed screen on a layer.