ASP.NET Core TabStrip Overview
The TabStrip is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
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.
Initializing the TabStrip
The following example demonstrates how to define the TabStrip.
@(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>);
})
)
<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>
public class TabStripController : Controller
{
public ActionResult Index()
{
return View();
}
}
Basic Configuration
The following example demonstrates the basic configuration of the TabStrip.
@(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>
<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.
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