Container for HxTab
s for easier implementation of tabbed UI.
Encapsulates HxNav
(NavVariant.Tabs
variant as default) and HxNavLink
s so you don't have to bother with them explicitly.
<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>
You can choose any variant of nav
using the NavVariant
parameter.
NavVariant.Tabs
NavVariant.Pills
NavVariant.Standard
When Variant
is set to TabPanelVariant.Card
, the tab navigation is placed in the card header and tab contents go into the card body.
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.
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. |
Single tab for HxTabPanel
.
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 |
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. |
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). |