New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Images
The PanelBar allows you to include images or sprite icons inside its items.
Images
You can include images in the Telerik UI for ASP.NET Core PanelBar items using the .ImageUrl() configuration option and passing the image Url as a parameter:
Razor
@(Html.Kendo().PanelBar()
.Name("panelbar-images")
.Items(panelbar =>
{
panelbar.Add().Text("Baseball")
.ImageUrl(Url.Content("~/shared/icons/sports/baseball.png"))
.Items(baseball =>
{
baseball.Add().Text("Top News")
.ImageUrl(Url.Content("~/shared/icons/16/star.png"));
baseball.Add().Text("Photo Galleries")
.ImageUrl(Url.Content("~/shared/icons/16/photo.png"));
baseball.Add().Text("Video Records")
.ImageUrl(Url.Content("~/shared/icons/16/video.png"));
baseball.Add().Text("Radio Records")
.ImageUrl(Url.Content("~/shared/icons/16/speaker.png"));
});
})
)
Sprites
You can also set sprites the the Telerik UI for ASP.NET Core PanelBar items using the .SpriteCssClasses() configuration option and specifying the sprite CSS class:
Razor
@(Html.Kendo().PanelBar()
.Name("panelbar-sprites")
.Items(panelbar =>
{
panelbar.Add().Text("Brazil")
.SpriteCssClasses("brazilFlag")
.Items(brazil =>
{
brazil.Add().Text("History")
.SpriteCssClasses("historyIcon");
brazil.Add().Text("Geography")
.SpriteCssClasses("geographyIcon");
});
})
)