时间戳

首页 > 解决方案 > 什么是 AppBar 与 ToolBar？

reactjs - 什么是 AppBar 与 ToolBar？

问题描述

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

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

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

那么material-ui Toolbar最终会消失吗？

标签： reactjsmaterial-uimaterial-components

解决方案

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

例如，假设我们有一个带有Toolbar的Appbar ，其中有两个Button作为子项：

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

这段代码的结果是：

这里

但是，如果我们移除Toolbar并将Button直接放在AppBar组件下：

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

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

这里

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

推荐阅读