Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
150415 | Jan 6,2020 03:35 PM UTC | Jan 7,2020 06:43 AM UTC | Blazor | 1 |
![]() |
Tags: ListBox |
@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)"> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.