reactjs - 什么是AppBar vs ToolBar？

所有material-ui示例均在Appbar中显示工具栏。为什么不只是Appbar？两者有什么区别？

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

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

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

最佳答案

我正在查看每个组件产生的默认CSS属性。 工具栏的主要目的是通过内嵌显示(子元素彼此相邻)显示其子项，而 Appbar 则不这样做。 AppBar 组件使用display:flex和flex-direction:列，这意味着直接后代彼此堆叠。另一方面，工具栏也使用display:flex，但未设置flex-direction，这意味着它使用其默认值:row。就是说，按钮组件使用display:inline-block。这就是在工具栏组件内将元素彼此相邻放置的原因。
举例来说，假设我们有一个应用栏和一个工具栏，其中两个按钮是 child :

<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 和工具栏具有不同的用途。这就是为什么我认为工具栏永远不会消失的原因。

关于reactjs - 什么是AppBar vs ToolBar？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52653103/