reactjs - 什么是应用栏与工具栏？

Question

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

https://material.io/design/components/ 没有有工具栏组件，只有“应用栏:顶部”。

https://material.io/develop/web/components/toolbar/说“现有的 MDCToolbar 组件和样式将在未来的版本中删除”

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

Answer 1

我正在查看每个组件生成的默认 CSS 属性。 工具栏的主要目的是通过内联显示来显示其子项(元素彼此相邻放置)，这是应用栏所不具备的。 AppBar 组件使用 display: flex 和 flex-direction: column，这意味着直接后代堆叠在一起。另一方面，工具栏也使用display: flex，但没有设置flex-direction，这意味着它使用其默认值:< em>行。也就是说，Button 组件使用 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>

这段代码的结果是:

但是，如果我们删除工具栏并将按钮直接放在AppBar组件下:

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

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

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