所有material-ui示例均在Appbar中显示工具栏。为什么不只是Appbar?两者有什么区别?
https://material.io/design/components/ 不没有工具栏组件,只有“应用栏:顶部”。
https://material.io/develop/web/components/toolbar/说:“现有MDCToolbar组件和样式将在以后的版本中删除”
那么material-ui工具栏最终会消失吗?
答案 0 :(得分:8)
AppBar 用于构建文档。您将通常放置在标签中的内容放入内容中,例如页面标题和导航链接。如果按F12检查页面,您会注意到AppBar创建了一个<header>
标签。
->因此,AppBar用于为您的页面提供放置简介和导航内容的地方
您可以将工具栏可视化为真实的工具带。在虚拟世界中,我们在工具上放置了图标和按钮,而不是工具。您也可以在工具栏中添加品牌名称,就像制造商在皮带上添加品牌名称一样。 ->工具栏是包装器,您可以在其中将元素放置在水平线上。
AppBar可以在没有工具栏的情况下使用,并且不必将工具栏放置在AppBar中。如果您希望标题看起来像工具栏,则可以进行<AppBar><Toolbar>...</Toolbar></AppBar>
。如果您想要在页面中心显示一个栏,只是为了炫耀图标,则不带AppBar的工具栏将很有意义。
答案 1 :(得分:5)
我正在查看每个组件产生的默认CSS属性。 工具栏的主要目的是通过内联显示(子元素彼此相邻)显示其子项,而应用栏则不行。 AppBar 组件使用 display:flex 和 flex-direction:column ,这意味着直接后代彼此堆叠。另一方面,工具栏也使用 display:flex ,但未设置 flex-direction ,这意味着它使用了默认值:< em> row 。就是说,按钮组件使用了 display:inline-block 。这就是为什么元素在工具栏组件内彼此相邻放置的原因。
例如,我们有一个 Appbar 和一个 Toolbar ,其中有两个 Button 作为子代:
<AppBar>
<Toolbar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</Toolbar>
</AppBar>
显示此代码的结果 here
但是,如果我们删除工具栏并将按钮放置在 AppBar 组件的正下方:
<AppBar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</AppBar>
结果将有很大的不同(显示为here),因为现在这些按钮是 AppBar 组件的直接后代,因此它们将堆叠在一起。 / p>
如您所见, AppBar 和工具栏具有不同的用途。这就是为什么我认为工具栏永远不会消失的原因。