Tabs
Tabs are a set of layered sections of content that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.
<FluentTabs> wraps the <fluent-tabs> element, a web component implementation of a tabs composition leveraging the
Fluent UI design system. It uses the <FluentTab> component to define the structure and content.
The default width for the active tab indicator is 20 pixels. If you would like to change this, you can add some rules to your CSS like this:
::deep fluent-tabs::part(activeIndicator) {
width: 85%;
}
Examples
Default
If checked, the contents of Tab two and three will be loaded after 1 second of processing (to simulate a long running process).
Active tab changed to:
Vertical
Download:
Custom Header and Panel usage
A <FluentTab> exposes a Header parameter that can be used to provide custom content for the tab header. This can be used to add icons, badges, etc.
The Panel parameter allows for custom content to be used for the tab panel. This can be used to add additional content to the panel, or to use a different component
Download:
Dynamic
Download:
Extra content
Horizontal
Vertical
Download:
No active tab indicator
No active indicator
No active indicator - Vertical
Download:
Documentation
FluentTabs Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ActiveTab | FluentTab | Gets the active selected tab. | |
ActiveTabId | string | ||
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Height | string? | Gets or sets the height of the tabs component. Needs to be a valid CSS value (e.g. 100px, 50%). | |
IdMoreButton | string | f1733aff7-more | Gets the unique identifier associated to the more button ([Id]-more). |
Orientation | Orientation | Horizontal | Gets or sets the tab's orentation. See Orientation |
ShowActiveIndicator | bool | True | Gets or sets a value indicating whether the active indicator is displayed. |
ShowClose | bool | False | Determines if a dismiss icon is shown. When clicked the FluentTabs.OnTabClose event is raised to remove this tab from the list. |
Size | TabSize? | Small | Gets or sets the width of the tab items. |
TabsOverflow | IEnumerable<FluentTab> | Gets all tabs with FluentTab.Overflow assigned to True. | |
Width | string? | Gets or sets the width of the tabs component. Needs to be a valid CSS value (e.g. 100px, 50%). |
EventCallbacks
Name | Type | Description |
|---|---|---|
ActiveTabIdChanged | EventCallback<string> | Gets or sets a callback when the bound value is changed. |
OnTabChange | EventCallback<FluentTab> | Gets or sets a callback when a tab is changed. |
OnTabClose | EventCallback<FluentTab> | Raised when a tab is closed. |
OnTabSelect | EventCallback<FluentTab> | Raised when a tab is selected. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
GoToTabAsync | string TabId | Task | Go to a specific tab by specifying an id |
OverflowRaisedAsync | string value | Task |
FluentTab Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Content | RenderFragment? | Gets or sets the customized content of this tab panel. | |
DeferredLoading | bool | False | Render the tab content only when the tab is selected. |
Disabled | bool | False | When true, the control will be immutable by user interaction. See disabled HTML attribute for more information. |
Header | RenderFragment? | Gets or sets the customized content of the header. | |
Icon | Icon? | Gets or sets the icon to display in front of the tab | |
Index | int | 0 | Gets the index number of this tab. |
Label | string | Gets or sets the label of the tab. | |
LabelClass | string? | Gets or sets the class, applied to the Label Tab Item. | |
LabelEditable | bool | False | True to let the user edit the FluentTab.Label property. |
LabelStyle | string? | Gets or sets the style, applied to the Label Tab Item. | |
LoadingContent | RenderFragment? | Gets or sets the customized loading content message when using deferred loading. | |
Overflow | bool? | If this tab is outside of visible tab panel area. | |
Owner | FluentTabs | Gets or sets the owning FluentTabs component. | |
Visible | bool | True | Gets or sets the visibility of a tab |
EventCallbacks
Name | Type | Description |
|---|---|---|
LabelChanged | EventCallback<string> | Callback to invoke when the label changes. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
UpdateTabLabelAsync | string tabId string label | Task |