blazor-devexpress-dot-blazor-dot-dxcontextmenuitem-4e7a6691.md
Specifies a menu item icon’s CSS class.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(null)]
[Parameter]
public string IconCssClass { get; set; }
| Type | Default | Description |
|---|---|---|
| String | null |
A menu item icon’s CSS class.
|
DevExpress Blazor components support pre-defined icon sets (such as Iconic or Bootstrap-recommended libraries) and custom icon libraries. Refer to the following topic for additional information: Icons.
You can use the IconCssClass property to implement a dynamically visible check sign in the item.
<DxContextMenu ItemClick="@OnItemClick" >
<Items>
<DxContextMenuItem Text="Sort By" IconCssClass="oi oi-sort-ascending">
<Items>
<DxContextMenuItem Text="Name" IconCssClass="@GetChecked("Name")" />
<DxContextMenuItem Text="Size" IconCssClass="@GetChecked("Size")" />
<DxContextMenuItem Text="Type" IconCssClass="@GetChecked("Type")" />
</Items>
</DxContextMenuItem>
<DxContextMenuItem Text="Copy" IconCssClass="oi oi-action-undo" BeginGroup="true" />
<DxContextMenuItem Text="Cut" IconCssClass="oi oi-action-redo" />
<DxContextMenuItem Text="Select All" BeginGroup="true" />
</Items>
</DxContextMenu>
@code {
string SortBy { get; set; }
void OnItemClick(ContextMenuItemClickEventArgs args) {
if (args.ItemInfo.Text == "Name" || args.ItemInfo.Text == "Size" || args.ItemInfo.Text == "Type")
SortBy = args.ItemInfo.Text;
}
string GetChecked(string ItemText) {
return (ItemText == SortBy) ? "oi oi-check" : null;
}
}
See Also