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.

Screenshot pendingImages/CrimsonUI/howto-tab-button.png
WBP_TabButton (parent: Crimson Tab Button Base) Graph: 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.

Screenshot pendingImages/CrimsonUI/howto-tab-list.png
WBP_SettingsTabs Class Defaults: Preregistered Tab Info Array with entries Graphics / Audio / Controls, each with Tab Button Type = WBP_TabButton and Tab Content Type = 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

Screenshot pendingImages/CrimsonUI/howto-tab-dynamic-bp.png
Register Dynamic Tab: Make CrimsonTabDescriptor (Tab Id = Mods, Tab Text = Mods, Tab Button Type, Tab Content Type) -> Register Dynamic Tab on the tab list. 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.