TabStrip Overview

This article provides information about the Blazor TabStrip component and its core features.

Telerik UI for Blazor Ninja image

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:

  1. Use the <TelerikTabStrip> tag
  2. Add a nested <TabStripTab> tag for each tab you want to include in the component
  3. Set tab titles through the Title parameter of the <TabStripTab> tags. You can additionally configure the tabs as desired - read more in the Tabs Configuration article
  4. 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 (false by 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;
    }
}

See Also

In this article
Not finding the help you need? Improve this article