Elements

TabItem

A specialized button element designed for use in tab interfaces. Extends Button functionality with active state and position management.

Constructor

new TabItem(new Label("Tab Title"));
new TabItem(new Image(icon), new Label("Tab with Icon"));

Examples

ViewModel Tab State

TabItems bind to ReactiveProperty for active state:

// Tab bound to ViewModel enum
new TabItem(new Label("Dashboard"))
    .BindActive(ViewModel.CurrentTab.Select(tab => tab == TabType.Dashboard))
    .OnClick(_ => ViewModel.SetActiveTab(TabType.Dashboard));

new TabItem(new Label("Settings"))
    .BindActive(ViewModel.CurrentTab.Select(tab => tab == TabType.Settings))
    .OnClick(_ => ViewModel.SetActiveTab(TabType.Settings));

Dynamic Tab Content

Tabs can display reactive content from ViewModel:

// Tab with notification badge
new TabItem(
    new Label("Messages"),
    new Label().BindText(ViewModel.UnreadCount.Select(c => $"({c})"))
        .BindVisible(ViewModel.UnreadCount.Select(c => c > 0))
        .ClassName("badge")
)
.BindActive(ViewModel.CurrentTab.Select(t => t == TabType.Messages))
.OnClick(_ => ViewModel.SetActiveTab(TabType.Messages));

Complete Tab Interface with Components

Build full tab interfaces using ViewModel and Components:

// Tab list bound to ViewModel
new TabList(
    new TabItem(new Label("Users"))
        .BindActive(ViewModel.CurrentTab.Select(t => t == TabType.Users))
        .OnClick(_ => ViewModel.SetActiveTab(TabType.Users)),
        
    new TabItem(new Label("Roles"))
        .BindActive(ViewModel.CurrentTab.Select(t => t == TabType.Roles))
        .OnClick(_ => ViewModel.SetActiveTab(TabType.Roles))
);

// Tab content using components
ViewModel.CurrentTab.Select(tab => tab switch {
    TabType.Users => Component<UserListViewModel, UserListView>(),
    TabType.Roles => Component<RoleListViewModel, RoleListView>(),
    _ => new Label("Select a tab")
});

Properties

PropTypeDefault
children?
IElement[]
[]
active?
bool
false
first?
bool
false
last?
bool
false
disabled?
bool
false
visible?
bool
true
name?
string
""
pickingMode?
PickingMode
PickingMode.Position

Methods

PropTypeDefault
Active?
(bool = true) => TabItem
-
GetActive?
() => bool
-
BindActive?
(Observable<bool>) => TabItem
-
First?
(bool = true) => TabItem
-
GetFirst?
() => bool
-
BindFirst?
(Observable<bool>) => TabItem
-
Last?
(bool = true) => TabItem
-
GetLast?
() => bool
-
BindLast?
(Observable<bool>) => TabItem
-
OnClick?
(EventCallback<ClickEvent>) => TabItem
-
Disabled?
(bool = true) => TabItem
-
GetDisabled?
() => bool
-
BindDisabled?
(Observable<bool>) => TabItem
-
Visible?
(bool) => TabItem
-
GetVisible?
() => bool
-
BindVisible?
(Observable<bool>) => TabItem
-
ClassName?
(string, bool = true) => TabItem
-
BindClassName?
(string, Observable<bool>) => TabItem
-
StyleSheet?
(StyleSheet) => TabItem or (string) => TabItem
-
Flex?
(int flexGrow, int flexShrink = 0) => TabItem
-
JustifyContent?
(Justify) => TabItem
-
AlignItems?
(Align) => TabItem
-
BindChildren?
<TChild>(Observable<TChild[]>, Func<TChild, IElement>) => TabItem
-

TabItem extends Button which extends Group which extends BaseElement.