TabStrip TagHelper Overview
The Telerik UI TabStrip TagHelper for ASP.NET Core 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 by using the TabStrip TagHelper.
<kendo-tabstrip name="tabstrip">
</kendo-tabstrip>
Basic Configuration
To pass the TabStrip items collection, either:
- Use the nested
<items>tag, or - Add
<li>tags. This approach will not include thetabstrip-itemtag helper attributes. And you will need to also include<div>tags for the content of the tabs.
<kendo-tabstrip name="tabstrip">
<items>
<tabstrip-item text="Tab 1">
<content><p>Content 1</p></content>
</tabstrip-item>
<tabstrip-item text="Tab 2">
<content><p>Content 2</p></content>
</tabstrip-item>
</items>
</kendo-tabstrip>
<kendo-tabstrip name="tabstrip">
<li>Tab 1</li>
<li>Tab 2</li>
<div>
<p>Content 1</p>
</div>
<div>
<p>Content 2</p>
</div>
</kendo-tabstrip>
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items => {
items.Add().Text("Tab 1").Content(@<text>
<p>Content 1</p>
</text>);
items.Add().Text("Tab 2").Content(@<text>
<p>Content 2</p>
</text>);
})
)
To further configure the TabStrip TagHelper, use its other options—<popup-animation>, and <scrollable>.
<kendo-tabstrip name="tabstrip">
<items>
<tabstrip-item text="Tab 1">
<content><p>Content 1</p></content>
</tabstrip-item>
<tabstrip-item text="Tab 2">
<content><p>Content 2</p></content>
</tabstrip-item>
</items>
<popup-animation>
<open duration="500" />
<close duration="300" />
</popup-animation>
<scrollable enabled="false" />
</kendo-tabstrip>
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items => {
items.Add().Text("Tab 1").Content(@<text>
<p>Content 1</p>
</text>);
items.Add().Text("Tab 2").Content(@<text>
<p>Content 2</p>
</text>);
})
.Animation(animation =>
animation.Open(open => open.Duration(500))
.Close(close => close.Duration(300))
)
.Scrollable(true)
)
Functionality and Features
The TabStrip provides options for setting up its items.