Hi
In the razor file:
<MenuItem Id="Cancel" Text = "Cancel" IconCss="e-icons close" HtmlAttributes="@menuCancelHtmlAttribute">
</MenuItem>
in c# file:
public Dictionary<string, object> menuCancelHtmlAttribute = new Dictionary<string, object>()
{
{"style", "background-color: #FFEBEE; font-weight: bold; " }
};
Menu item has different background color but hover and focus not working.
Greetings
Maciej
Hi Maciej,
We have prepared the sample based on your requirement. Using the HtmlAttributes property, we can set the class name to li item. Using that class name, we can set the focus and hover style for that li element. Please refer to the below code snippet and the attached sample file.
|
<SfMenu TValue="MenuItem"> <MenuItems> ………………………………………….. <MenuItem Text="Help" HtmlAttributes="@menuCancelHtmlAttribute"></MenuItem> </MenuItems> </SfMenu> @code{ public Dictionary<string, object> menuCancelHtmlAttribute = new Dictionary<string, object>() { {"class", "e-custom-item" } }; }
<style> .e-custom-item { background-color: #FFEBEE !important; font-weight: bold !important; }
.e-custom-item:hover { background-color: aqua !important; }
.e-custom-item:focus { background-color: aquamarine !important; } </style>
|
Regards,
YuvanShankar A
Great
Thank you and best regards
Maciej
Maciej, we are happy to hear that your requirement has been fulfilled. Please get back to us if you need any other assistance.
If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.
