Blazor 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 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
In this article:
<!-- End Document Outline -->---
Creating Blazor TabStrip
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
Position of the Tabs
The Blazor TabStrip component allows you to control the position of the tabs. Read more about the Tabs Position...
Persist Content
The Blazor TabStrip component can persist the content of the tabs. Read more about the Persist Content...
Scrollable Tabs
The Blazor TabStrip allows you to scroll only its tabs. This is useful for scenarious where a lot of tabs are defined. Read more about the Scrollable Tabs...
| Parameter | Type | Header 2 |
|---|---|---|
ActiveTabIndex |
int |
Allows you to get and set the currently shown tab index through two-way binding, and also provides an event for the tab change (ActiveTabIndexChanged). To deactivate all tabs, se the ActiveTabIndex parameter to -1. |
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. |
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;
}
}