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

Tab State

TabItems bind to ReactiveProperty for active state:

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

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

Dynamic Tab Content

Tabs can display reactive content:

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

Complete Tab Interface with Components

Build full tab interfaces using Components:

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

    new TabItem(new Label("Roles"))
        .BindActive(CurrentTab.Select(t => t == TabType.Roles))
        .OnClick(_ => SetActiveTab(TabType.Roles))
);

// Tab content using components
CurrentTab.Select(tab => tab switch {
    TabType.Users => (IElement)new UserList(),
    TabType.Roles => (IElement)new RoleList(),
    _ => new Label("Select a tab")
});

Properties

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

Methods

Prop	Type	Default
`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.