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.
This is the disabled tab.
<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>
		<Content>This is the disabled tab.</Content>
	</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.
This is the disabled tab.

Pills #

NavVariant.Pills
This is the second tab.
This is the disabled tab.

Standard #

NavVariant.Standard
This is the second tab.
This is the disabled tab.

Card with tabs #

When Variant is set to TabPanelVariant.Card, 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.
This is the disabled tab.

Rendering only active tab contents #

By default, the HxTabPanel renders the contents of all tabs, and the visibility of the active tab is controlled by CSS. If you want to render the active tab only, you can use the RenderMode="TabPanelRenderMode.ActiveTabOnly" parameter.

RenderMode="TabPanelRenderMode.AllTabs" (default)

Loaded First tab.

Loaded Second tab.

RenderMode="TabPanelRenderMode.ActiveTabOnly"

Loaded First tab.

API #

Parameters #

Name Type Description
ActiveTabId string ID of the active tab (@bindable).
ActiveTabIdChanged EventCallback<string> Raised when the ID of the active tab changes.
CardSettings CardSettings Card settings for the wrapping card. Applies only if Variant is set to TabPanelVariant.Card.
ChildContent RenderFragment Tabs.
CssClass string Additional CSS class.
InitialActiveTabId string ID of the tab which should be active at the very beginning.
We are considering deprecating this parameter. Please use ActiveTabId instead (@bind-ActiveTabId).
NavVariant NavVariant The visual variant of the nav items. Default is NavVariant.Tabs.
RenderMode TabPanelRenderMode Determines whether the content of all tabs is always rendered or only if the tab is active.
Default is TabPanelRenderMode.AllTabs.
Variant TabPanelVariant Set to TabPanelVariant.Card if you want 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
ContentREQUIRED 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 🗙