BoldDeskHelp desk software offering ticketing, live chat, and omnichannel support, starting at $49/mo. for 10 agents. Try it for free.
@using Syncfusion.EJ2.Blazor.DropDowns <EjsListBox TValue="string[]" DataSource="@Data" ModelType="@Model"> <ListBoxFieldSettings Text="Text"></ListBoxFieldSettings> <ListBoxTemplates> <ItemTemplate> <div class="list-wrapper"> <span class="@((context as ListData).Pic) e-avatar e-avatar-xlarge e-avatar-circle"></span> <span class="text">@((context as ListData).Text)</span><span class="description">@((context as ListData).Description)</span> </div> </ItemTemplate> </ListBoxTemplates> </EjsListBox> @code { public ListData Model = new ListData(); public List<ListData> Data = new List<ListData> { new ListData { Text = "Javascript", Pic = "javascript", Description = "It is a lightweight interpreted or JIT-compiled programming language." }, new ListData { Text = "Typescript", Pic = "typescript", Description = "It is a typed superset of Javascript that compiles to plain JavaScript." }, new ListData { Text = "Angular", Pic = "angular", Description = "It is a TypeScript-based open-source web application framework." }, new ListData { Text = "React", Pic = "react", Description = "A JavaScript library for building user interfaces. It can also render on the server using Node." }, new ListData { Text = "Vue", Pic = "vue", Description = "A progressive framework for building user interfaces. it is incrementally adoptable." } }; public class ListData { public string Text { get; set; } public string Pic { get; set; } public string Description { get; set; } } } <style> .e-listbox-wrapper { margin: auto; max-width: 400px; box-sizing: border-box; } .list-wrapper { height: inherit; position: relative; padding: 14px 12px 14px 78px; } .list-wrapper .text, .list-wrapper .description { display: block; margin: 0; padding-bottom: 3px; white-space: normal; } .list-wrapper .description { font-size: 12px; font-weight: 500; } .e-listbox-wrapper .list-wrapper .text { font-weight: bold; font-size: 13px; } .list-wrapper .e-avatar { position: absolute; left: 5px; background-color: transparent; font-size: 22px; top: calc(50% - 33px); } .javascript { background-image: url('./images/javascript.svg'); } .typescript { background-image: url('./images/typescript.svg') } .angular { background-image: url('./images/angular.svg'); } .vue { background-image: url('./images/vue.svg'); } .react { background-image: url('./images/react.svg'); } </style>
<EjsListBox TValue="string[]" DataSource="@Data" ModelType="@typeof(ListData)"> |