ASP.NET MVC TabStrip Overview
The TabStrip is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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>);
})
)
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>
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.
Forms—You can render forms inside the TabStrip and let users submit data.
Images—The TabStrip supports adding custom images.