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:

Nav variants #

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 Variant is set to TabPanelVariant.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.

Rendering only active tab contents #

By default, the HxTabPanel renders contents of all tabs and the visibility of active tab is controlled by CSS. If you want to render 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 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.
NavVariant	`NavVariant`	The visual variant of the nav items. Default is `NavVariant.Tabs`.
RenderMode	`TabPanelRenderMode`	Determines whether the content 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	`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).