By changing the background to blue for this sample, I was able to figure out what styles for the other roles of MenuItem could do:
TopLevelHeader
SubmenuHeader
SubmenuItem
But changing the style for TopLevelItem didn't appear to have any effect, so I'm wondering if anyone would give an example of how it can be used.
BionicCode commented
You obviously don't have a top level item, which is a top level MenuItem without child items. When a MenuItem has submenu items, then the TopLevelHeaderTemplateKey or SubmenuHeaderTemplateKey applies. Only if the item has no children, the SubmenuItemTemplateKey or TopLevelItemTemplateKey applies.
Related
I am having trouble creating dropdown menus using headlessui Listbox.
There are two listboxes, one at the top and one at the bottom of the page. The problem is that when the top listbox menu is opened, it interferes with the bottom listbox making it difficult to make a selection. The selection menu should be completely front layer. How can I fix this?
Before making selection:
Open the top listbox:
The bottom listbox is in the way:
The code sandbox is available here so you can try test the situation.
After a bit of research, I found a workaround to this problem.
We can set the following style option to the first listbox element.
(or make a div element that contains the first listbox and set the style.)
style={{ position: "relative", zIndex: 1 }}
You might not need position option or need to set it to "absolute".
Note that tailwinds "z-1" option didn't work.
The following issue helped me: https://github.com/tailwindlabs/headlessui/discussions/1583
Please teach me how to control the background color when right-clicking on TreeView/TreeItem.
Based on https://codesandbox.io/s/jggxz?file=/demo.tsx which is linked from https://material-ui.com/components/tree-view/ ,
in the case of implementing the context menu function, the background color of the right-clicked item is not as expected.
Let me explain how it works by watching the attached video.
Right-click on "Forums" to bring up the context menu.
Then, for a brief moment, "Forums" will get the focus and the background color will change to pink.
After the background color disappears, the context menu will appear.
Also, up to this point, the background color of "Promotions", which was selected from the beginning, is always green.
What I want is the following. What should I do to make it look like the following?
Right-click on "Forums" to bring up the context menu.
Then the background color of the right-clicked item "Forums" will change to green, and
at the same time, the background color of the selected "Promotions" from the beginning will disappear.
Another thing I tried was to use TreeView's "selected" props and useState, but it did not work as expected.
That version is below.
https://codesandbox.io/s/material-demo-forked-h5z8e?file=/demo.tsx
I have tried everything possible to style my Tab component but its not getting reflected. I want my selected Tab to have a white background and red foreground. Even though I have edited Style using Theme designer. Its still doesnt work. I read the docs and I am aware Tab component is now like a toggle. I did the suggestion to setTabUIID(null) but still cant get it to work. How can this be done.
You don't need the setTabUIID(null); just make sure to style both selected and unselected styles. Also override the Border to Empty if you don't define a border.
I am trying to get a result looking like this (picture taken from https://material.google.com/components/tabs.html#tabs-usage):
I don't want the tabs to take 100% of the width of the page, as it is by default with material-ui. Is it possible to do this with the implementation of material-ui ? I already played with the width of each tab using the style tab property, but the inkbare seems hardcoded to use percentages according to the id of the selected tab, and therefore doesn't underline properly the resized tabs. Is there a workaround?
There is an issue related to this problem https://github.com/callemall/material-ui/issues/1203
But yes, there is an easy workaround. (unfortunately it doesnt support diffrent widths across the tabs).
You can use the Tabs tabItemContainerStyle property to set the width of the tabs container (make it the width you want to each tab times the number of tabs).
Since the background color is setted on that element, you're gonna need to override the styles for two others Tabs properties (style and contentContainerStyle).
In this example Im setting the same color as my tabs in the style property (for the whole component) and setting the contentContainerStyle back to a white background.
You could use the classes properties as well..
Ex: (Imagine you have a blue toolbar)
<Tabs
tabItemContainerStyle={{width: '400px'}}
style={{background: 'blue'}}
contentContainerStyle={{background: '#FFF'}} >
How can I create a theme for a dialog box?
I was trying to change the border style of the dialog box but the border style applies 2 times for an inner element and for an outer element. I was expected that the border style applies only to the inner element.
To be clearer, as I cannot add image to my post, it seems that the dialog does not consist only from the center box which is showed while dialog is active. The dialog UI consists from a “background form” which usually is transparent and from a container which overlay over the background form. The last mentioned container contains de graphic representation of the “dialog box”.
My issue is that I can not apply my style only to the container which contains the dialog box but the style applies also to the background form.
How can I apply the border style only to the dialog box container element?
Any additional tips will be highly appreciated.
Thanks.
How are you applying the style? Are you using the theme to apply a style to the Dialog UIID as explained here.
Using setStyle or getStyle on a dialog component would be problematic and would not result in proper styling (you might get away with doing it on getDialogComponent but you should work with the theme).
Notice that to style a dialog you should use Dialog, DialogTitle & DialogBody UIID's and quite a few theme constants.
Thanks Shai,
is clear now.
I’m doing a custom dialog starting from the BlankDialog element provided in designer.
Because I started from BlankDialog I thought that overriding only UIID theme is enough.
I understood the BlankDialog structure wrongly thinking that is a simple empty form because is named "Blank…"
Is clear now that for every new UI object added, I should check if it has any other UI child to be customized together with the parent.
Thanks again.