Hello,
Ona Freedom UI page I have a button with menu items. How can I add a CSS class to the menu? Basically I need to apply the "crt-menu-glassmorphism" class to the menu div with role="menu" (with existing classes mat-menu-panel and crt-menu)
If I add:
"classes": [ "crt-menu-glassmorphism" ]to the button that has the menu the class gets applied to the button, not the menu. If I add the above to the crt.MenuItem elements nothing gets applied.
Is there a way to add CSS classes to a menu (without creating my own component with a )?
Ryan
Like
Hello Ryan,
I haven't found the way to apply css to the specific menu item of the specific button on the page, but using (just for test):
body .crt-menu .crt-menu-item,body .crt-menu .crt-menu-clickable-item { color: red; }
selector modified the color of all menu items on the page (I was testing it in the section list where I had a custom button and the "Actions" button). And after that I was trying to seek for the selector for a specific menu item, but it they are dynamically generated and this is almost impossible to do.
If it works for you and you have only one button on the page with menu items you can test the selector above using a standard way as in the old page:
1) Create CSS module in configurations
2) Specify this selector in the LESS tab
3) Add it to the page schema where this css should be applied into the SCHEMA_DEPS
Additionally I've asked our core R&D team to create some designer tool to be able to modify menu item styles easily. Thank you for helping us in making the application better!
Oleg Drobina,
Yes, that is the route I am using now, however, I am trying to avoid that since I want the style to apply to my own menu only (it's not actually on the page but a button near the crt.AppToolbar that runs along the top of the app on all pages). Since the menu's don't retain any "id" value from the viewConfigDiff so they're impossible to uniquely identify. I suppose I'll need to implement it as a remote module instead to create the <mat-menu> directly. I was hoping there would be an exposed "menuClasses" property or something that I could add to the button that pops the menu, but I might need to wait for more documentation.
The menu items, however, do allow you to add "name": "some-name" to them in the viewConfigDiff and it's retained as an attribute "crt-menu-view-element-item" in the markup.
Ryan
Ryan Farley,
Did u found any specific way to add custom class in any component in freedom ui so that it did not propagate to other components of same class name .
Pranshu Basak,
Most components do allow for adding a css class to the component using the "classes" property. However, for adding to crt.MenuItems for a button, there's no support for "classes".
Ryan