Blazor 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 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:

  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

Blazor Tabstrip Left

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;
    }
}

See Also

In this article