HxTabPanel

Container for HxTabs for easier implementation of tabbed UI.
Encapsulates HxNav (NavVariant.Tabs variant as default) and HxNavLinks so you don't have to bother with them explicitly.

Basic usage #

This is the first tab.
This is the second tab. This tab is initially active.
<HxTabPanel InitialActiveTabId="tab2">
	<HxTab Title="First tab">
		<Content>This is the first tab.</Content>
	</HxTab>
	<HxTab Id="tab2">
		<TitleTemplate>Second tab</TitleTemplate>
		<Content>This is the second tab. This tab is initially active.</Content>
	</HxTab>
	<HxTab Enabled="false">
		<TitleTemplate>Disabled tab</TitleTemplate>
	</HxTab>
</HxTabPanel>

Getting/setting active tab programatically #

This is the first tab.
This is the second tab.
activeTabId:

You can choose any variant of nav using the NavVariant parameter.

Tabs

NavVariant.Tabs
This is the second tab.

Pills

NavVariant.Pills
This is the second tab.

Standard

NavVariant.Standard
This is the second tab.

Card with tabs #

When RenderMode is set to TabPanelRenderMode.Card, then the tab navigation is placed in the card header and tab contents go into the card body.

This is the first tab.
This is the second tab. This tab is initially active.

API

Parameters

Name Type Description
ActiveTabId string ID of the active tab (@bindable).
ActiveTabIdChanged EventCallback<string> Raised when ID of the active tab changes.
CardSettings CardSettings Card settings for the wrapping card. Applies only if RenderMode is set to TabPanelRenderMode.Card.
ChildContent RenderFragment Tabs.
CssClass string Additional CSS class.
InitialActiveTabId string ID of the tab which should be active at the very beginning.
NavVariant NavVariant The visual variant of the nav items. Default is NavVariant.Tabs.
RenderMode TabPanelRenderMode Whether to wrap the tab panel in a card with the tab navigation in the header.

HxTab

Single tab in HxTabPanel.

API

Parameters

Name Type Description
Content RenderFragment Content of the tab.
ContentCssClass string Additional CSS class(es) to be applied to the tab content (pane).
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
Id string ID of the tab (HxTabPanel.ActiveTabId). Autogenerated GUID if not set.
Title string Tab title.
TitleCssClass string CSS class(es) to be applied to the tab title (navigation).
TitleTemplate RenderFragment Tab title template.
Visible bool True for visible tab. Set false when tab should not be visible.

Event callbacks

Name Type Description
OnTabActivated EventCallback Rised when the tab is activated.
OnTabDeactivated EventCallback Rised when the tab is deactivated (another tab is activates or when HxTabPanel is disposed).
An unhandled error has occurred. Reload 🗙