![]() Expected Behavior I can use it like in example Current Behavior IconMenu was removed. We assumed the height of the child menu will be always less than 1000px.You can always increase this number. I have searched the issues of this repository and believe that this is not a duplicate. By default the ul tag of child menu is set to max-height: 0, when the open class added by clicking the its parent item we set max-height to a big number like 1000px. Each icon is created using our design guidelines to depict in simple and. We need a little bit of css to make the drop down Menu actually open and close on click. Material design system icons are simple, modern, friendly, and sometimes quirky. Add and remove open class to the li tag if you click on it. npm install mui/icons-material Run an install for the icons-material will bring them into your nodemodules/mui folder. My App .appDropdown directive which is attached to the ul tag of menu.ĪppDropdownLink which is attached to the li tag of an itemĪnd the appDropdownToggle toggle which is attached to the a tag of an item. In v5.10.10 this component is not installed with mui. Now letâs talk about how expansion panel works. ![]() It renders the child items inside itself.Īnd again if it finds another dropDown during rending the child items it will again call the ng-template inside child items and render grandchild items.This process will go on as long as it finds the child items. ![]() And we passed the array of submenu or child items. 2,100+ ready-to-use React Material Icons from the official website. Means itâs calling or referencing itself recursively. We called ng-template #menuTemplate inside itself. I can see that when the icon button is clicked it renders the MenuItems in a div with a zIndex of 2100 but it. I tested this on a completely blank page to make sure that there wasn't an issue caused by any other elements on the page. Then the child menu items directly underneath of it.Īnd here is the tricky part. The zIndex on the IconMenu is set to 2100 but unless I set it to at least 5000 it does not show the MenuItems. If the item type is dropDown we render the dropdown toggle item first. How to use material-ui IconMenu inside cell of React fixed-data-table. Then we used *ngIf to conditionally render different types of menu items such as link, dropdown, extLink. Material UI provides icon support in three ways: Standardized Material Icons exported as React components (SVG icons). We iterate through the array of menu items and render each item. I tested this on a completely blank page to make sure that there wasnt an issue caused by any other elements on the page. We passed the array of menu items to the ng-template. The zIndex on the IconMenu is set to 2100 but unless I set it to at least 5000 it does not show the MenuItems. We used ng-template to render the dropdown menu.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |