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
| 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.