Blazor TabStrip Overview
The Blazor TabStrip component displays a collection of tabs, containing associated content, which enable the user to switch between different views inside a single component.
The TabStrip component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor TabStrip
- Use the
<TelerikTabStrip>tag. - Add a nested
<TabStripTab>tag for each tab you want to include in the component. - Set tab titles through the
Titleparameter of the<TabStripTab>tags. - Optionally, configure other tab settings such as
Disabled- read more in the Tabs Configuration article. - Place the desired content in the tabs - it can be any content, including other components.
TabStrip with specified tab position and a disabled tab
<TelerikTabStrip>
<TabStripTab Title="First">
First tab content.
</TabStripTab>
<TabStripTab Title="Second" Disabled="true">
Second tab content. This tab is disabled and you cannot select it.
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
Active Tab Index
By default, the initially selected tab is the first one. You can programmatically control the selected tab through the ActiveTabIndex parameter. Read more about the ActiveTabIndex...
Tabs Configuration
The Tabs are the building blocks of the TabStrip. The component allows individual configuration of the declared <TabStripTab> tags - you can set their title and visibility or put them in disabled state. Read more about the available Tabs configuration options...
Position of the Tabs
The Blazor TabStrip component allows you to control the position of the tabs. Read more about the Tabs Position...
Alignment of the Tabs
The Blazor TabStrip component allows you to control the alignment of the tabs. Read more about the Tabs Alignment...
Persist Content
The Blazor TabStrip component can persist the content of the tabs. When the user navigates between the tabs, their content will be hidden with CSS only to avoid re-initialization. Read more about the Persist Content...
Scrollable Tabs
The Blazor TabStrip allows you to scroll only its tabs. This is useful for scenarios where a lot of tabs are defined. Read more about the Scrollable Tabs...
Events
The TabStrip fires an ActiveTabIndexChanged event when the user clicks on a tab to select it.
TabStrip Parameters
The TabStrip provides the following features to allow further customization of its behavior:
| Parameter | Type | Header 2 |
|---|---|---|
ActiveTabIndex |
int |
The index of the currently shown tab. Supports two-way binding. |
PersistTabContent |
bool |
Whether to remove the content of inactive tabs from the DOM (if false), or just hide it with CSS (if true). See Persist Content
|
Scrollable |
bool |
Whether the tabs will be scrollable. See Scrollable Tabs |
TabPosition |
TabPosition enum ( TabPosition.Top) |
Controls the position of the tabs. |
TabAlignment |
TabStripTabAlignment enum ( TabStripTabAlignment.Start) |
Controls the alignment of the tabs. |
Styling and Appearance
The following parameters enable you to customize the appearance of the Blazor TabStrip:.
| Parameter | Type | Description |
|---|---|---|
Class |
string |
The CSS class that will be rendered on the main wrapping element of the component. |
Width |
string |
The width of the component. You can set the Width parameter to any of the supported units. |
Height |
string |
The height of the Component. You can set the Height parameter to any of the supported units. |
TabStrip Reference and Methods
The TabStrip methods are accessible through its reference.
| Method | Description |
|---|---|
Refresh |
Redraws the component. |
Get a reference to the TabStrip and use its methods.
@* This code snippet demonstrates usage of the TabStrip Refresh() method. *@
<TelerikTabStrip @ref="@TabRef">
<CityPopulation TabRef="TabRef" />
</TelerikTabStrip>
@code {
public TelerikTabStrip TabRef { get; set; }
}
@* This code snippet demonstrates usage of the TabStrip Refresh() method. *@
<TabStripTab Title="Sofia">
<Content>
<div>
<h2>City Population: @Count</h2>
</div>
<TelerikButton OnClick="IncreaseCount">Increase Count!</TelerikButton>
</Content>
</TabStripTab>
@code {
public int Count { get; set; } = 30;
[Parameter] public TelerikTabStrip TabRef { get; set; }
void IncreaseCount()
{
Count += 1;
TabRef.Refresh();
}
}
Next Steps
- Configure the Tabs
- Explore the supported Tab positions and alignments
- Handle the TabStrip events