Images
The TabStrip allows you to include images or sprite icons in its tabs.
Images
To include images in the Telerik UI for ASP.NET Core TabStrip items, use the .ImageUrl() configuration option and pass the image Url as a parameter:
@(Html.Kendo().TabStrip()
.Name("tabstrip-images")
.Items(tabstrip =>
{
tabstrip.Add().Text("Baseball")
.ImageUrl(Url.Content("~/shared/icons/sports/baseball.png"))
.Content(@<text>
Baseball content
</text>);
tabstrip.Add().Text("Football")
.ImageUrl(Url.Content("~/shared/icons/sports/football.png"))
.Content(@<text>
Football content
</text>);
tabstrip.Add().Text("Basketball")
.ImageUrl(Url.Content("~/shared/icons/sports/basketball.png"))
.Content(@<text>
Basketball content
</text>);
})
)
<kendo-tabstrip name="tabstrip-images">
<items>
<tabstrip-item text="Baseball"
image-url="~/shared/icons/sports/baseball.png">
<content>
Baseball content
</content>
</tabstrip-item>
<tabstrip-item text="Baseball"
image-url="~/shared/icons/sports/football.png">
<content>
Football content
</content>
</tabstrip-item>
<tabstrip-item text="Baseball"
image-url="~/shared/icons/sports/basketball.png">
<content>
Basketball content
</content>
</tabstrip-item>
</items>
</kendo-tabstrip>
Sprites
To include sprites in the Telerik UI for ASP.NET Core TabStrip items, use the .SpriteCssClasses() configuration option and specify the sprite CSS class:
@(Html.Kendo().TabStrip()
.Name("tabstrip-sprites")
.Items(tabstrip =>
{
tabstrip.Add().Text("Brazil")
.SpriteCssClasses("brazilFlag")
.Content(@<text>
Brazil, officially the Federative Republic of Brazil, is the largest country in South America.
</text>);
tabstrip.Add().Text("India")
.SpriteCssClasses("indiaFlag")
.Content(@<text>
India, officially the Republic of India, is a country in South Asia.
</text>);
tabstrip.Add().Text("Netherlands")
.SpriteCssClasses("netherlandsFlag")
.Content(@<text>
The Netherlands is a constituent country of the Kingdom of the Netherlands, located mainly in North-West Europe and with several islands in the Caribbean.
</text>);
})
.SelectedIndex(0)
)
<kendo-tabstrip name="tabstrip-sprites">
<items>
<tabstrip-item text="Brazil"
icon-class="k-sprite brazilFlag">
<content>
Brazil, officially the Federative Republic of Brazil, is the largest country in South America.
</content>
</tabstrip-item>
<tabstrip-item text="India"
icon-class="k-sprite indiaFlag">
<content>
India, officially the Republic of India, is a country in South Asia.
</content>
</tabstrip-item>
<tabstrip-item text="Netherlands"
icon-class="k-sprite netherlandsFlag">
<content>
The Netherlands is a constituent country of the Kingdom of the Netherlands, located mainly in North-West Europe and with several islands in the Caribbean.
</content>
</tabstrip-item>
</items>
</kendo-tabstrip>