Search results

Icons and Customization

Icons

To place the icon on a list box, set the IconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the list.

In the following sample, icon classes are mapped with IconCss field.

@using Syncfusion.EJ2.Blazor.DropDowns

<EjsListBox TValue="string[]" DataSource="@SettingsData">
    <ListBoxFieldSettings Text="Text" IconCss="IconCss" />
</EjsListBox>

@code {
     public List<SettingItems> SettingsData = new List<SettingItems> {
        new SettingItems{ Text = "Settings", IconCss = "e-icons e-list-settings" },
        new SettingItems{ Text = "Save", IconCss = "e-icons e-list-save" },
        new SettingItems{ Text = "Save As", IconCss = "e-icons e-list-saveas" },
        new SettingItems{ Text = "Undo", IconCss = "e-icons e-list-undo" },
        new SettingItems{ Text = "Print", IconCss = "e-icons e-list-print" },
        new SettingItems{ Text = "Delete", IconCss = "e-icons e-list-delete" }
    };

    public class SettingItems {
        public string Text  { get; set; }
        public string IconCss  { get; set; }
    }

}
<style>
    .e-list-settings:before {
        content: "\e679";
    }

    .e-list-print:before {
        content: "\e813";
    }

    .e-list-save:before {
        content: "\e703";
    }

    .e-list-saveas:before {
        content: "\e704";
    }

    .e-list-delete:before {
        content: "\e707";
    }

    .e-list-undo:before {
        content: "\ec14";
    }

</style>

Output will be shown as

ListBox

Templates

ListBox items can be customized according to the requirement using ItemTemplate property.

To use templates, the listbox must be bound with named model. This can be done by specifying the model type using the ModelType property of the listbox component as follows.

@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>

Output will be shown as

ListBox

Contents
Contents