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 80 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basics
The TabStrip is defined through the <TelerikTabStrip> tag that accepts children of type <TabStripTab>. Inside the tabs you can add content like in any other container, including other components.
The tab exposes a Title attribute that is the text rendered in the heading. It also offers the Disabled attribute that allows you to disable its selection.
The ActiveTabIndex parameter lets 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.
To control the position of the tab titles, the main TabStrip tag exposes the optional TabPosition attribute that takes a member of the Telerik.Blazor.TabPosition enumeration:
-
Top(default) LeftRightBottom
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
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;
}
}
Extract information for the currently selected tab from your model. Alter the model to affect the TabStrip. Create tabs dynamically based on external data.
You can find another example with some more details in the following sample project: Dynamic Tabs.
@result
<TelerikTabStrip ActiveTabIndexChanged="@TabChangedHandler">
@{
foreach (MyTabModel item in tabs)
{
<TabStripTab Title="@item.Title" Disabled="@item.Disabled">
Content for tab @item.Title
</TabStripTab>
}
}
</TelerikTabStrip>
<TelerikButton OnClick="@( () => tabs[1].Disabled = !tabs[1].Disabled )">Toggle the Disabled state of the second tab</TelerikButton>
@code {
MarkupString result { get; set; }
void TabChangedHandler(int newIndex)
{
string tempResult = $"current tab {newIndex} selected on {DateTime.Now}";
MyTabModel currTab = tabs[newIndex];
tempResult += $"<br />the new tab has a title {currTab.Title}";
result = new MarkupString(tempResult);
}
List<MyTabModel> tabs = new List<MyTabModel>()
{
new MyTabModel { Title = "One" },
new MyTabModel { Title = "Two", Disabled = true },
new MyTabModel { Title = "Three" }
};
public class MyTabModel
{
public string Title { get; set; }
public bool Disabled { get; set; }
}
}
If you render components in the tabs created in a
foreachloop, you may want to set their@keyparameter to unique values, in order to ensure they will re-render. If you do not, the framework will render one instance of your custom component for all tabs and will only set its parameters, it will not initialize anew (OnInitializedwill not fire a second time, onlyOnParametersSetwill).