TabStrip Overview
This article provides information about the Blazor TabStrip component and its core features.
The TabStrip component is part of Telerik UI for Blazor, a
professional grade UI library with 90+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
In this article:
Basics
To use a Telerik TabStrip for Blazor:
- 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. You can additionally configure the tabs as desired - read more in the Tabs Configuration article - Place the desired content in the tabs - it can be any content, including other components
A Telerik TabStrip with example reference, tab position and disabled tab
@using Telerik.Blazor.Components
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Left" @ref="myTabStrip">
<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>
@code {
Telerik.Blazor.Components.TelerikTabStrip myTabStrip;
}
The result from the code snippet above
Features
-
Class- the CSS class that will be rendered on the main wrapping element of the component. -
ActiveTabIndex- allows you get and set the currently shown tab index through two-way binding, and also provides an event for the tab change. To deactivate all tabs, set it to-1. -
TabPosition- allows you to set the desired position of the tab headers. Read more in Tabs - Position article. -
PersistTabContent- defines whether the tab content will remain in the DOM when the tab is inactive (falseby default). Read more in the Persist Content article.
Example
Get and set the selected tab index
Active Tab Index: @ActiveTabIndex
<TelerikTabStrip @bind-ActiveTabIndex="@ActiveTabIndex">
<TabStripTab Title="First">
First tab content.
</TabStripTab>
<TabStripTab Title="Second">
Second tab content. I will be active initially due to the default value of the parameter.
<br />
<TelerikButton OnClick="@SelectThirdTab">Select Third Tab</TelerikButton>
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
@code {
public int ActiveTabIndex { get; set; } = 1;
void SelectThirdTab()
{
ActiveTabIndex = 2;
}
}