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

• Tabs—The TabStrip provides various configuration options for the tabs, which allows you to organize the content into different views.

• Tab content—You can customize the content shown to the user.

• Animation effects—The animation options help you to configure the desired switch transitions between the different tabs.

• Appearance Customization—The TabStrip provides various settings to control the desired appearance.

• Images—The TabStrip supports adding custom images.

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