Tabs

Tabs divides a page into tabs, each a TabPanel named by its Value (value in React), the same on Blazor and React. It can keep the selected tab in the URL, so a page opens on it again, and it mounts each panel only when it is first shown.

React Blazor

Remembering the selected tab

Set SelectedTabQueryParameter (selectedTabQueryParameter in React) to keep the selected tab in that query-string parameter. A refresh, a shared link or coming back to the page then opens it on that tab. Choosing a tab replaces the browser's history entry rather than adding one, so the back button leaves the page instead of stepping through its tabs, and a form's unsaved-changes warning doesn't come up for it. The default tab is left out of the URL. Tabs are named by value, not position, so a link still opens the right tab after tabs are added or moved. Give each set of tabs on a page its own parameter.

React Blazor

Mounting panels

A panel mounts the first time its tab is shown and then stays mounted, so a grid on it isn't loaded until it is wanted, and doesn't load again, or lose its page and search, when the user comes back to it. A panel's editors aren't part of the form until it mounts, so mount a panel of a form's fields with the tabs: set LazyMount (lazyMount in React) to false on that TabPanel, and the form validates and saves them before the tab is opened. Set it on Tabs to mount every panel with the tabs.

Selecting a tab

Bind SelectedTab (selectedTab and onSelectedTabChange in React) to know which tab is selected or to select one. DefaultTab (defaultTab) is selected when nothing else selects one; otherwise it's the first tab that isn't disabled. A tab named by the URL is selected over both when the page opens.

React Blazor

Tabs

Each panel shows when it was mounted: switch back and forth and the time stays, because a panel stays mounted. The selected tab is kept in the URL's tab parameter, so refreshing the page opens it again. The last tab is disabled.

React example Blazor example React TypeScript Razor
Overview Contacts Documents Archive

The tab a page opens on, unless the URL names another.

Mounted at 3:03:24 PM

React Blazor

Tabs Class

Parameters

Name
Type
Default
Description
ChildContentRenderFragment?
The tabs: a Components.TabPanel for each.
DefaultTabstring?
The TabPanel.Value of the tab selected when nothing else selects one; the first tab that isn't disabled when null. It is left out of the URL.
LazyMountbool
True
Whether a panel mounts only when it is first shown (the default), and then stays mounted. When false every panel mounts with the tabs. A panel's own TabPanel.LazyMount overrides it.
SelectedTabstring?
The TabPanel.Value of the selected tab. Bind it to know which is selected or to select one. A tab named by the URL is selected over it when the page opens.
SelectedTabQueryParameterstring?
The query-string parameter that keeps the selected tab in the URL, as a grid's PersistedStateQueryParameter keeps its state. The URL's history entry is replaced rather than added to, so going back leaves the page. When null (the default) the selection isn't kept. Give each set of tabs on a page its own.
Name: ChildContent
Type: RenderFragment?
Description: The tabs: a Components.TabPanel for each.
Name: DefaultTab
Type: string?
Description: The TabPanel.Value of the tab selected when nothing else selects one; the first tab that isn't disabled when null. It is left out of the URL.
Name: LazyMount
Type: bool
Default: True
Description: Whether a panel mounts only when it is first shown (the default), and then stays mounted. When false every panel mounts with the tabs. A panel's own TabPanel.LazyMount overrides it.
Name: SelectedTab
Type: string?
Description: The TabPanel.Value of the selected tab. Bind it to know which is selected or to select one. A tab named by the URL is selected over it when the page opens.
Name: SelectedTabQueryParameter
Type: string?
Description: The query-string parameter that keeps the selected tab in the URL, as a grid's PersistedStateQueryParameter keeps its state. The URL's history entry is replaced rather than added to, so going back leaves the page. When null (the default) the selection isn't kept. Give each set of tabs on a page its own.

Events

Name
Type
Description
SelectedTabChangedEventCallback<string>
Raised when another tab is selected, with its TabPanel.Value.
Name: SelectedTabChanged
Type: EventCallback<string>
Description: Raised when another tab is selected, with its TabPanel.Value.
React Blazor

TabPanel Class

Parameters

Name
Type
Default
Description
ChildContentRenderFragment?
The panel's content.
Disabledbool
False
Whether the tab can't be selected.
Headerstring?
The tab's header text.
HeaderTemplateRenderFragment?
The tab's header, in place of TabPanel.Header.
LazyMountbool?
Whether the panel mounts only when it is first shown, overriding Tabs.LazyMount. Mount a panel of a form's editors with the tabs (false), so the form validates and saves the fields on it before it is opened.
Value*string
Names the tab: what Tabs.SelectedTab holds and the URL carries. A short name that stays the same when tabs are added or moved, such as contacts.
Name: ChildContent
Type: RenderFragment?
Description: The panel's content.
Name: Disabled
Type: bool
Default: False
Description: Whether the tab can't be selected.
Name: Header
Type: string?
Description: The tab's header text.
Name: HeaderTemplate
Type: RenderFragment?
Description: The tab's header, in place of TabPanel.Header.
Name: LazyMount
Type: bool?
Description: Whether the panel mounts only when it is first shown, overriding Tabs.LazyMount. Mount a panel of a form's editors with the tabs (false), so the form validates and saves the fields on it before it is opened.
Name: Value*
Type: string
Description: Names the tab: what Tabs.SelectedTab holds and the URL carries. A short name that stays the same when tabs are added or moved, such as contacts.