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 Cut, Copy, Paste menu items are added using the IconCss property.
@using Syncfusion.EJ2.Blazor.SplitButtons
<EjsSplitButton Items="@Items" IconCss="e-icons e-paste">Paste</EjsSplitButton>
@code {
public List<ItemModel> Items = new List<ItemModel>
{
new ItemModel{ Text = "Cut", IconCss = "e-icons e-cut" },
new ItemModel{ Text = "Copy", IconCss = "e-icons e-copy" },
new ItemModel{ Text = "Paste", IconCss = "e-icons e-paste" }
};
}
<style>
.e-paste::before {
content: '\e501';
}
.e-cut::before {
content: '\e604';
}
.e-copy::before {
content: '\e60d';
}
</style>Output be like
Template
Item Templating
Popup items can be customized by 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
<EjsSplitButton Items="@Items" OnItemRender="Render">Edit</EjsSplitButton>
@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
Contents
Contents
Thank you for your feedback and comments.We will rectify this as soon as possible!