Getting Started with the SkeletonContainer
This tutorial explains how to set up a basic Telerik UI for ASP.NET Core SkeletonContainer and highlights the major steps in the configuration of the component.
You will initialize a SkeletonContainer component.
Finally, you can run the sample code in Telerik REPL and continue exploring the component.
Prerequisites
To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET Core components:
-
You can use the Telerik REPL playground and skip installing the components on your system and configuring a project.
-
You can prepare a Visual Studio project by following the following guide:
- Creating a new pre-configured project for the Telerik UI for ASP.NET Core components from a project template.
1. Prepare the CSHTML File
The first step is to add the required directives at the top of the .cshtml document:
-
To use the Telerik UI for ASP.NET Core HtmlHelpers:
cshtml@using Kendo.Mvc.UI -
To use the Telerik UI for ASP.NET Core TagHelpers:
cshtml@addTagHelper *, Kendo.Mvc
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.
@using Kendo.Mvc.UI <h4>SkeletonContainer</h4>2. Initialize the SkeletonContainer
Use the SkeletonContainer HtmlHelper or TagHelper to add the component to a page:
- The
Name()configuration method is mandatory as its value is used for theidand thenameattributes of the SkeletonContainer element. - The
Template()configuration method defines a template that will be used to visualize the skeleton shapes..
<h4>SkeletonContainer</h4> @section HeadContent { <style> .k-card-header { display: flex; height: 70px; } .user-info { padding-left: 10px; } .cards-container { display: flex; flex-wrap: wrap; justify-content: center; } .cards-container > div { margin: 5%; } .cards-container .k-card .k-card-subtitle { margin-top: 5px; } .avatar { border-radius: 50%; width: 40px; height: 40px; } .k-card { width: 340px; height: 350px; } .k-card-footer { text-align: center; } </style> } <div class="cards-container"> @(Html.Kendo().SkeletonContainer() .Name("skeleton") .Template("<div class='k-card'>" + "<div class='k-card-header'>" + "<div>" + "<span data-shape-circle class='k-card-media avatar'></span>" + "</div>" + "<div class='user-info' style='width: 100%;'>" + "<span data-shape-text class='k-card-title'></span>" + "<span data-shape-text class='k-card-subtitle' style='width: 35%;'></span>" + "</div>" + "</div>" + "<span data-shape-rectangle style='width: 340px; height: 225px; '></span>" + "<div class='k-card-body'>" + "<span data-shape-text></span>" + "</div>" + "</div>") ) <div class="k-card"> <div class="k-card-header"> <div style="width:40px; height:40px;"> <img alt="Telerik UI for ASP.NET Core SkeletonContainer avatar" class="k-card-media avatar" src="@Url.Content("~/shared/web/skeleton/avatar.jpg")" /> </div> <div class="user-info"> <h5 class="k-card-title">Tom Smith</h5> <h6 class="k-card-subtitle">5 hours ago</h6> </div> </div> <img alt="Telerik UI for ASP.NET Core SkeletonContainer Prague" class="k-card-media" src="@Url.Content("~/shared/web/skeleton/card-thumbnail.jpg")" /> <div class="k-card-body"> <p>Having so much fun in Prague! #NaZdravi</p> </div> </div> </div> 3. Use the Animation Configuration of the SkeletonContainer
The next step is to configure Animation configuration. The Animation configuration defines a value determining whether the items will be animated.
@using Kendo.Mvc.UI <h4>SkeletonContainer</h4> @section HeadContent { <style> .k-card-header { display: flex; height: 70px; } .user-info { padding-left: 10px; } .cards-container { display: flex; flex-wrap: wrap; justify-content: center; } .cards-container > div { margin: 5%; } .cards-container .k-card .k-card-subtitle { margin-top: 5px; } .avatar { border-radius: 50%; width: 40px; height: 40px; } .k-card { width: 340px; height: 350px; } .k-card-footer { text-align: center; } </style> } <div class="cards-container"> @(Html.Kendo().SkeletonContainer() .Name("skeleton") .Animation(SkeletonContainerAnimation.Pulse) .Template("<div class='k-card'>" + "<div class='k-card-header'>" + "<div>" + "<span data-shape-circle class='k-card-media avatar'></span>" + "</div>" + "<div class='user-info' style='width: 100%;'>" + "<span data-shape-text class='k-card-title'></span>" + "<span data-shape-text class='k-card-subtitle' style='width: 35%;'></span>" + "</div>" + "</div>" + "<span data-shape-rectangle style='width: 340px; height: 225px; '></span>" + "<div class='k-card-body'>" + "<span data-shape-text></span>" + "</div>" + "</div>") ) <div class="k-card"> <div class="k-card-header"> <div style="width:40px; height:40px;"> <img alt="Telerik UI for ASP.NET Core SkeletonContainer avatar" class="k-card-media avatar" src="@Url.Content("~/shared/web/skeleton/avatar.jpg")" /> </div> <div class="user-info"> <h5 class="k-card-title">Tom Smith</h5> <h6 class="k-card-subtitle">5 hours ago</h6> </div> </div> <img alt="Telerik UI for ASP.NET Core SkeletonContainer Prague" class="k-card-media" src="@Url.Content("~/shared/web/skeleton/card-thumbnail.jpg")" /> <div class="k-card-body"> <p>Having so much fun in Prague! #NaZdravi</p> </div> </div> </div>5. (Optional) Reference Existing SkeletonContainer Instances
You can reference the SkeletonContainer instances that you have created and build on top of their existing configuration:
-
Use the
idattribute of the component instance to establish a reference.JS<script> var skeletoncontainer = $("#skeleton").data("kendoSkeletonContainer"); // skeletoncontainer is a reference to the existing skeletoncontainer instance of the helper. </script>
Explore this Tutorial in REPL
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground: