-
-
Notifications
You must be signed in to change notification settings - Fork 32k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Tabs] Add support for prefix icons #11653
Comments
I haven't tried this, but could you use one of those icons as just part of the text for a normal tab to get that appearance? |
@vibolvireak For the moment we are focusing on meeting the spec given all the Material v2 changes to address. You can probably achieve this with some custom styling though. If you manage to come up with an elegant solution, by all means share it here. Thanks for the suggestion though. |
@mbrookes @jeffvandyke The way i achieve this is by inject a code like below
Apply style on
|
For better aligning it is possible to decrease the icon size:
Another solution (depending on the icon) is to use the
|
|
It would be great to see a toggleable implementation of this (leading icon, top, none) as shown in Material.io: https://material.io/components/tabs/ |
Huh, it seems MWC have implemented it, even though it still isn't part of the spec. Not sure whether to reopen this issue or not... |
@zackeilholz2 I've been taking a little break but I'm currently working on building a generic component we can use across the demos to replicate those showcases. |
// Override MuiTab in theme.js
overrides: {
MuiTab: {
wrapper: {
flexDirection:'row',
},
},
}, Hope this help! |
is there any default way to achieve it, as if I override the theme js then it will effect the tab in whole application, but I wanna this in only two components? |
@raza2022 you can apply @nvdunginest's suggestion locally: |
@raza2022 here is the sample local customization:
|
I've tried all of these suggestions and cannot for the life of me get any of them to work :( No matter what I do - embed the icon in the label, specify flexDirection: 'row' on tabs or tab or wrapper,, the icon always stays above the label. |
I tried the following way and it seemed to work for me. Let me know if this helps. <Tab label={<div><StorageIcon style={{verticalAlign: 'middle'}} /> Data </div>} /> |
That worked!! Thank you so much :) |
Great :) |
Thank you so much, it worked like a charm |
The way I mange this is by using a Button then assign it to the Tab's label const tabButton = (
<Button variant="text" startIcon={icon} fullWidth>
{label}
</Button>
);
const customTab = <Tab label={btn}></Tab>; |
For those still fretting with the styling, here's what I did so it would turn out formatted perfectly with 24x24px icons:
Where Icon is a React component that returns a hardcoded element with 'style' and 'fill' props set via the passed 'style' and 'color' props respectively. Even with 'verticalAlign' set to 'middle' the icon still sits a little too low, hence the 2 pixels of 'marginBottom'. The amount of pixels for 'marginRight' just depends on how close you want the icon to be to the text. The #555555 (dark gray) color for the icon when tab is not selected is slightly darker than the label (which is black with 54% opacity against a white background in my case) but it just seems to blend in better. Good luck folks! |
In tabs component the icon only display on the top. I prefer the icon on the left like the image show below.
Expected Behavior
Current Behavior
Your Environment
The text was updated successfully, but these errors were encountered: