什么是 AppBar 与 ToolBar？

Question

所有 material-ui 示例都显示了 Appbar 中的 Toolbar。为什么不只是 Appbar？两者有什么区别？

https://material.io/design/components/ 没有有工具栏组件，只有 "App bars: top".

https://material.io/develop/web/components/toolbar/ 说 "The existing MDCToolbar component and styles will be removed in a future release"

那么 material-ui 工具栏最终会消失吗？

Answer 1

我正在查看每个组件生成的默认 CSS 属性。 Toolbar 的主要目的是通过内联显示显示其子项（元素彼此相邻放置），Appbar 不会. AppBar组件使用了display:flex和flex-direction:column，即直接后代堆叠在彼此之上。另一方面，Toolbar 也使用 display: flex，但没有设置 flex-direction，这意味着它使用其默认值：行。也就是说，Button 组件使用 display: inline-block。这就是为什么元素在 Toolbar 组件中并排放置的原因。

例如，我们有一个 Appbar 和一个 Toolbar 以及两个 Button 小时候：

<AppBar>
    <Toolbar>
        <Button variant="outlined" color="inherit" >
            Button 1
        </Button>
        <Button variant="outlined" color="inherit">
            Button 2
        </Button>
    </Toolbar>
</AppBar>

这段代码的结果是：

但是，如果我们删除 Toolbar 并将 Button 直接放在 AppBar[=52= 下] 组成部分：

<AppBar> <Button variant="outlined" color="inherit" > Button 1 </Button> <Button variant="outlined" color="inherit"> Button 2 </Button> </AppBar>

结果将非常不同，如下所示，因为现在按钮是 AppBar 组件的直接后代，因此它们将彼此堆叠。

如您所见，AppBar 和 Toolbar 有不同的用途。这就是为什么我认为 工具栏 永远不会消失。

Answer 2

AppBar 用于构建您的文档。您将通常放置在标签中的内容放入内容中，例如页面标题和导航链接。如果您按 F12 检查您的页面，您会注意到 AppBar 创建了一个 <header> 标记。 -> 所以AppBar是用来给你的页面一个放置介绍和导航内容的地方

您可以将工具栏想象成现实生活中的工具带。在虚拟世界中，我们在其上放置图标和按钮而不是工具。您还可以在工具栏中添加您的品牌名称，就像制造商在他们的腰带上所做的那样。 -> 工具栏是一个包装器，您可以在其中水平放置元素。

AppBar 可以在没有 Toolbar 的情况下使用，并且 Toolbar 不必放在 AppBar 中。如果您希望 header 看起来像一个工具栏，那么 <AppBar><Toolbar>...</Toolbar></AppBar> 是有意义的。如果您希望在页面中央有一个栏只是为了显示图标，那么没有 AppBar 的工具栏是有意义的。

什么是 AppBar 与 ToolBar？

What is AppBar vs ToolBar?

reactjs

material-ui

material-components