ASP.NET Core TabStrip Overview

The Telerik UI TabStrip TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TabStrip widget.

The TabStrip displays a collection of tabs with associated content. It is composed of an unordered list of items which represent tabs, and a collection of div elements, which contain the content for each tab.

• Demo page for the TabStrip TagHelper

• Demo page for the TabStrip HtmlHelper

Initializing the TabStrip

The following example demonstrates how to define the TabStrip.

Razor

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Paris")
            .Selected(true)
            .Content(@<text>
                <div class="weather">
                    <p>Rainy weather in Paris.</p>
                </div>
            </text>);

        tabstrip.Add().Text("Sofia")
            .Content(@<text>
                <div class="weather">
                    <p>Sunny weather in Sofia.</p>
                </div>
            </text>);

        tabstrip.Add().Text("Moscow")
            .Content(@<text>
                <div class="weather">
                    <p>Cloudy weather in Moscow.</p>
                </div>
            </text>);

        tabstrip.Add().Text("Sydney")
            .Content(@<text>
                <div class="weather">
                    <p>Rainy weather in Sidney.</p>
                </div>
            </text>);
    })
)

Razor

<kendo-tabstrip name="tabstrip">
    <items>
        <tabstrip-item text="Paris"
                       selected="true">
            <content>
                <div class="weather">
                    <p>Rainy weather in Paris.</p>
                </div>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Sofia">
            <content>
                <div class="weather">
                    <p>Sunny weather in Sofia.</p>
                </div>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Moscow">
            <content>
                <div class="weather">
                    <p>Cloudy weather in Moscow.</p>
                </div>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Sydney">
            <content>
                <div class="weather">
                    <p>Rainy weather in Sidney.</p>
                </div>
            </content>
        </tabstrip-item>
    </items>
</kendo-tabstrip>

C#

public class TabStripController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Basic Configuration

The following example demonstrates the basic configuration of the TabStrip.

Razor

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .TabPosition(TabStripTabPosition.Bottom)
    .Collapsible(true)
    .Navigatable(false)
    .Animation(animation =>
    {
        animation.Open(config =>
        {
            config.Fade(FadeDirection.In);
        });
    })
    .Items(items =>
    {
        items.Add().Text("One")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </text>);

        items.Add().Text("Two")
            .Content(@<text>
                <p>Mauris pulvinar molestie accumsan.</p>
            </text>);
    })
)

<script type="text/javascript">
    $(function () {
        // The Name() of the TabStrip is used to get its client-side instance.
        var tabstrip = $("#tabstrip").data("kendoTabStrip");
        console.log(tabstrip);
    });
</script>

Razor

<kendo-tabstrip name="tabstrip"
                tab-position="bottom"
                collapsible="true"
                navigatable="false">
    <popup-animation>
        <open duration="300" effects="fade:in" />
    </popup-animation>
    <items>
        <tabstrip-item text="One">
            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </content>
        </tabstrip-item>
        <tabstrip-item text="Two">
            <content>
                <p>Mauris pulvinar molestie accumsan.</p>
            </content>
        </tabstrip-item>
    </items>
</kendo-tabstrip>

<script type="text/javascript">
    $(function () {
        // The Name() of the TabStrip is used to get its client-side instance.
        var tabstrip = $("#tabstrip").data("kendoTabStrip");
        console.log(tabstrip);
    });
</script>

Functionality and Features

Feature	Description
Appearance	The TabStrip provides various settings to control the appearance of the tabs.
Data Binding	The component supports various data binding approaches including items binding, model binding, and remote data binding for loading tab content dynamically.
Tabs	The TabStrip supports various built-in options for the tabs that allow you to organize the content into different views.
Tab content	You can customize each tab's contnet.

| Images| Include images or icons in the tabs. | | Animation effects| The animation options help you to configure the desired switch transitions between the different tabs. | | Events| The component emits a variety of events that allow you to implement custom functionality. | | Accessibility| The TabStrip is accessible by screen readers and provides WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation. |

Next Steps

• Getting Started with the TabStrip

• Basic Usage of the TabStrip HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the TabStrip TagHelper for ASP.NET Core (Demo)

• TabStrip in Razor Pages

See Also

• Using the API of the TabStrip for ASP.NET Core (Demo)
• Knowledge Base Section