Search results

Popup items

Icons

The popup action item have an icon or image to provide visual representation of the action. To place the icon on a popup item, set the IconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the popup action item.

In the following sample, the icons for edit, delete, mark as read and like message menu items are added using the IconCss property.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsDropDownButton Items="@Items" IconCss="e-icons e-message">Message</EjsDropDownButton>

@code {

public List<ItemModel> Items = new List<ItemModel>
{
    new ItemModel { Text = "Edit", IconCss = "e-icons e-edit" },
    new ItemModel { Text = "Delete", IconCss = "e-icons e-delete" },
    new ItemModel { Text = "Like", IconCss = "e-icons e-like" }
};
}

<style>
    .e-message::before {
        content: '\e30d';
    }

    .e-edit::before {
        content: '\e81e';
    }

    .e-delete::before {
        content: '\e84e';
    }

    .e-like::before {
        content: '\e682';
    }

</style>

Output be like

Button Sample

Separator

The Separators are the horizontal lines that are used to separate the popup items. You cannot select the separators. You can enable separators to group the popup items using the Separator property.

In the following sample, cut, copy, and paste popup items are grouped using the separator property:

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsDropDownButton Items="@Items">Clipboard</EjsDropDownButton>

@code{

    public List<ItemModel> Items = new List<ItemModel>
    {
        new ItemModel { Text = "Cut"},
        new ItemModel { Text = "Copy" },
        new ItemModel { Text = "Paste" },
        new ItemModel { Separator = true },
        new ItemModel { Text = "Font" },
        new ItemModel { Text = "Paragraph" }
    };

}

Output be like

Button Sample

Actions in DropDownButton can be used to navigate to the other web page when action item is clicked. This can be achieved by providing link to the action item using url property.

In the following sample, navigation URL for Flipkart, Amazon, and Snapdeal action items are added using the url property:

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsDropDownButton Items="@Items" IconCss="e-icons e-shopping">Shop By</EjsDropDownButton>

@code{

    public List<ItemModel> Items = new List<ItemModel>
    {
        new ItemModel { Text = "Flipkart", Url = "https://www.google.co.in/search?q=flipkart"},
        new ItemModel { Text = "Amazon", Url = "https://www.google.co.in/search?q=amazon" },
        new ItemModel { Text = "Snapdeal", Url = "https://www.google.co.in/search?q=snapdeal" }
    };

}

<style>

.e-shopping::before {
    content: '\e30c';
}

</style>

Output be like

Button Sample

Template

Item Templating

Popup items can be customized using the OnItemRender event. The item render event triggers while rendering each popup action item. The event argument will be used to customize the items based on the requirement.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsDropDownButton Items="@Items" OnItemRender="@Render">Edit</EjsDropDownButton>

@code {
    public List<ItemModel> Items = new List<ItemModel>
    {
            new ItemModel{ Text = "Cut" },
            new ItemModel{ Text = "Copy" },
            new ItemModel{ Text = "Paste" }
        };

    public void Render(MenuEventArgs args)
    {
        args.Element.AddClass(new string[] { "custom" });
    }
}

<style>
    .custom{
        float: left;
        font-size: 10px;
        padding-left: 50px;
        font-style: oblique;
    }
</style>

Output be like

Button Sample