All the material-ui examples show Toolbar inside Appbar. Why not just Appbar? What's the difference between the two?
https://material.io/design/components/ does not have Toolbar component, only "App bars: top".
https://material.io/develop/web/components/toolbar/ says "The existing MDCToolbar component and styles will be removed in a future release"
So will material-ui Toolbar go away eventually?
I was looking at the default CSS properties produced by each component. The main purpose of Toolbar is to display its children with an inline display (elements are placed next to each other), something Appbar doesn't do. The AppBar component uses display: flex and flex-direction: column, that means direct descendants are stacked on top of each other. On the other hand Toolbar uses display: flex too, but doesn't set flex-direction, which means it uses its default value: row. That being said, the Button component uses display: inline-block. That is the reason why elements are placed next to each other inside Toolbar components.
Let say, for example, we have an Appbar with a Toolbar with two Buttons as children:
<AppBar>
<Toolbar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</Toolbar>
</AppBar>
The result of this code is:
But, if we remove the Toolbar and place the Buttons directly under the AppBar component:
<AppBar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</AppBar>
the result will be very different as shown below, because now the buttons are direct descendants of the AppBar component and so, they will be stacked on top of each other.
As you see, AppBar and Toolbar have different purposes. Thats why I think Toolbar will never go away.
The AppBar is used to structure your document. You put in content what you would normally place inside a tag e.g the title of your page and navigation links. If you examine your page by pressing F12 you will notice the AppBar created a <header> tag.
-> So the AppBar is used to give your page a place to put in introductional and navigational content
You can visualize the Toolbar as a real life tool belt. In the virtual world instead of tools we place icons and buttons on it. You can also add your brand name inside the tool bar just like manufacturers do that on their belts.
-> The toolbar is a wrapper where you can place elements in a horizontal line.
AppBar can be used without a Toolbar and a Toolbar doesn't have to be placed inside a AppBar. If you want your header to look like a toolbar it makes sense to do <AppBar><Toolbar>...</Toolbar></AppBar>. If you want a bar at the center of the page just to show off icons a Toolbar without a AppBar would make sense.
Related
I am new to material UI and react js, I just tried to add 2 buttons, one is with primary color, and another with Primary-light. How can I do that
I am using emotion library. This is what I tried it. I am not trying to change of the default color of primary-light, I wants to use the default primary-light color to my button
<Button variant="contained" >Primary Button</Button>
<Button variant="contained" color="secondary" >secondary Button</Button>
the above 2 buttons are working as expected.
<Button variant="contained" color="primary-light" >secondary Button</Button> //I know the syntax is wrong.
How to do this?
"primary-light" is not one of the supported colours by MUI buttons.
Which you can see in the documentation here here
You have a few options:
Manually override the style of this button. (not ideal).
Make a class that specifies the colour you want and provide the hex colour code as the background colour. (also not ideal).
Make a JSX class using makeStyles that takes the app's theme as an argument and provide the primary.light colour directly from your theme. (I'm not sure if this is outdated in version 5 of material UI but it is how you would usually do it in v4).
In your case it's probably easiest to take a quick look at the documentation Here Which shows how to customize colours on buttons using your theme and the styled function which is imported from mui/material/styles.
I had to create "primaryLight" color property in theme object so I could use. Also had to add types in order to Button can accept "primaryLight".
I used this document
A hacky workaround would be to use the defined theme color and then overwrite with sx prop.
<Button
color={'primary'}
variant='contained'
onClick={() => toggle(true)}
sx={{width: '100%', bgcolor: 'primary.dark', '&:hover': {bgcolor: 'primary.light'}}}
>
comments
</Button>
I believe this is prevented by design.
Button components are meant to get a color, and use the color main key.
You may use ButtonPropsColorOverrides to allow more color values, which is useful when you add more colors to the theme, but still - you'll get the color's main key, and cannot access other color keys.
I believe this design is meant to keep the color system integrity. You're not supposed to use primary.light key since it may be used for other effects (like hover).
Note that you can use inner color keys for some other components, like typography:
<Typography variant="body2" color="primary.light">Hello</Typography>
I'm working on fixing some responsive design issues with a sidebar component in React, and one problem with it is that the label text on the tabs gets wicked scrunched up on smaller screens. I want to hide this text but I can't seem to find a good way to do it.
I've tried replacing the label text with a div that is hidden via bootstrap on small/x-small screens, but that doesn't work
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
Ideally this text should go away on smaller screens but it just acts as though I hadn't put anything there at all. In fact, any bootstrap classes I try to add to that div seem to have no effect. How might I go about fixing this?
If you are using Material UI, you can use Hidden tag to hide label based on mobile viewport. When you use tag 'Hidden' with prop xsDown, the label will be hidden at or below xs breakpoint.
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14
I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.
If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:
function SettingsMenu() {
return (
<ElevationScroll>
<AppBar>
<Toolbar>
<Typography>
Settings
</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar/>
<MyMenu/>
);
}
I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!
It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.
In Material-UI, The FlatButton, when is clicked, it will animate a ripple, ripple will start where you click the point, how can I change the ripple will start in the FlatButton center?
example: in the below picture, the ripple started from the top right.
enter image description here
You can set the undocumented centerRipple property (boolean) on the FlatButton:
jsFiddle: https://jsfiddle.net/dymkau2b/1/
<FlatButton centerRipple label="Center Ripple" />
(The ={true} is implicit in JSX)
I have Material-UI Tabs component with 5 Tab components as children. I would like to display a Badge on the Tab. Badge would display unread items under each tab.
I have two versions of tab bar. One for desktop with icon and text and one for mobile containing just icon. How could I position Badge so that it places properly on both versions. Also Badge should be visible even if tab is not selected (if I set Badge as a child to a Tab it will be hidden when tab is not selected).
You can do it like this:
<Tab label={<Badge badgeContent={this.state.messageCount} color="primary">
Messages
</Badge>} value="/messages" />