Prepared sample for Blazor Avatar control

Author: Backiaraj

Avatar/AvatarUGSample/Pages/IntegrateIntoListView.cshtml

@@ -0,0 +1,129 @@
+@page
+@model AvatarUGSample.Pages.IntegrateIntoListViewModel
+@{
+    var template = "<div class='listWrapper'>" +
+        "${if(avatar!=='')}" +
+        "<span class='e-avatar e-avatar-small e-avatar-circle'>${avatar}</span>" +
+        "${else}" +
+        "<span class='${pic} e-avatar e-avatar-small e-avatar-circle'> </span>" +
+        "${/if}" +
+        "<span class='text'>" +
+        "${text} </span> </div>";
+
+    List<object> data = new List<object>();
+    data.Add(new { text = "Robert", id = "s_01", avatar = "", pic = "pic04" });
+    data.Add(new { text = "Nancy", id = "s_02", avatar = "N", pic = "" });
+    data.Add(new { text = "John", id = "s_03", pic = "pic01", avatar = "" });
+    data.Add(new { text = "Andrew", id = "s_04", avatar = "A", pic = "" });
+    data.Add(new { text = "Michael", id = "s_05", pic = "pic02", avatar = "" });
+    data.Add(new { text = "Steven", id = "s_06", pic = "pic03", avatar = "" });
+    data.Add(new { text = "Margaret", id = "s_07", avatar = "M", pic = "" });
+}
+
+<div class="col-lg-12 control-section">
+    <ejs-listview id='letterAvatarList' dataSource=@data headerTitle='Contacts' template="@template" showHeader=true sortOrder="Ascending">
+    </ejs-listview>
+</div>
+
+
+<style>
+    .control-section {
+        overflow: auto;
+    }
+
+    /* Listview Customization */
+
+    #letterAvatarList {
+        max-width: 350px;
+        margin: auto;
+        border: 1px solid #dddddd;
+        border-radius: 3px;
+    }
+
+        #letterAvatarList .listWrapper {
+            width: inherit;
+            height: inherit;
+            position: relative;
+        }
+
+        #letterAvatarList .e-list-header {
+            height: 54px;
+        }
+
+    .material #letterAvatarList .e-list-header .e-text {
+        line-height: 22px;
+    }
+
+    .fabric #letterAvatarList .e-list-header .e-text {
+        line-height: 22px;
+    }
+
+    .bootstrap #letterAvatarList .e-list-header .e-text {
+        line-height: 13px;
+    }
+
+    .highcontrast #letterAvatarList .e-list-header .e-text {
+        line-height: 20px;
+    }
+
+    #letterAvatarList .e-list-item {
+        cursor: pointer;
+        height: 50px;
+        line-height: 44px;
+        border: 0;
+    }
+
+    /* Badge Positioning */
+
+    #letterAvatarList .e-badge {
+        margin-top: 12px;
+    }
+
+    #letterAvatarList .listWrapper .text {
+        width: 60%;
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0 50px;
+    }
+
+    /* Avatar Positioning */
+
+    #letterAvatarList .listWrapper .e-avatar {
+        position: absolute;
+        top: calc(100% - 40px);
+        font-size: 10px;
+        left: 5px;
+    }
+
+    /* Avatar Background Customization */
+
+    #letterAvatarList .e-list-item:nth-child(1) .e-avatar {
+        background-color: #039BE5;
+    }
+
+    #letterAvatarList .e-list-item:nth-child(3) .e-avatar {
+        background-color: #E91E63;
+    }
+
+    #letterAvatarList .e-list-item:nth-child(5) .e-avatar {
+        background-color: #009688;
+    }
+
+    /* Avatar images using 'background-image' property */
+
+    .pic01 {
+        background-image: url(@Url.Content("~/css/avatar/images/pic01.png"));
+    }
+
+    .pic02 {
+        background-image: url(@Url.Content("~/css/avatar/images/pic02.png"));
+    }
+
+    .pic03 {
+        background-image: url(@Url.Content("~/css/avatar/images/pic03.png"));
+    }
+
+    .pic04 {
+        background-image: url(@Url.Content("~/css/avatar/images/pic04.png"));
+    }
+</style>

Avatar/AvatarUGSample/Pages/IntegrateIntoListView.cshtml.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace AvatarUGSample.Pages
+{
+    public class IntegrateIntoListViewModel : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}

Avatar/AvatarUGSample/Pages/Shared/_Layout.cshtml

@@ -40,6 +40,9 @@
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/IntegratewithBadge">Integrate with Badge</a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-page="/IntegrateIntoListView">Integrate into ListView</a>
+                        </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                         </li>