Menu
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?
225
The key differences that distinguish the Toolbar from the ActionBar include: Toolbar is a View included in a layout like any other View. As a regular View , the toolbar is easier to position, animate and control. Multiple distinct Toolbar elements can be defined within a single activity.
The Toolbar is basically the advanced successor of the ActionBar. It is much more flexible and customizable in terms of appearance and functionality. Unlike ActionBar, its position is not hardcoded i.e., not at the top of an activity.
The app bar, also known as the action bar, is one of the most important design elements in your app's activities, because it provides a visual structure and interactive elements that are familiar to users.
The Toolbar is a flex container, allowing flex item properites to be used to lay out the children. classes. object. Override or extend the styles applied to the component.
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.
67
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
