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 from code #

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 for 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.
Order int The order (display index) of the tab.
Due to stable sorting used, the order in which the tabs are rendered is preserved when the Order parameter is 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 Raised when the tab is activated.
OnTabDeactivated EventCallback Raised when the tab is deactivated (another tab is activates or when HxTabPanel is disposed).
An unhandled error has occurred. Reload 🗙