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>

Wrapping HxTab components with <AuthorizeView> or similar structures is not supported. HxTabPanel expects HxTab components to be its direct children. To dynamically control tab visibility, set the HxTab.Visible parameter or use conditional rendering with an @if condition.

Getting/setting active tab from code #

This is the first tab.

This is the second tab.

activeTabId:

Nav variants #

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
Content^REQUIRED	`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).