什么是AppBar vs ToolBar? [英] What is AppBar vs ToolBar?

问题描述

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

All the material-ui examples show Toolbar inside Appbar. Why not just Appbar? What's the difference between the two?

https://material.io/design/components/不会 具有工具栏组件，只有应用栏:顶部".

https://material.io/design/components/ does not have Toolbar component, only "App bars: top".

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

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

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

So will material-ui Toolbar go away eventually?

推荐答案

我正在查看每个组件生成的默认CSS属性. 工具栏的主要目的是通过内联显示(子元素彼此相邻)显示其子项，而应用栏则不行. AppBar 组件使用 display:flex 和 flex-direction:column ，这意味着直接后代彼此堆叠.另一方面，工具栏也使用 display:flex ，但未设置 flex-direction ，这意味着它使用了默认值: row .就是说，按钮组件使用了 display:inline-block .这就是为什么元素在工具栏组件内彼此相邻放置的原因.

I was looking at the default CSS properties produced by each component. The main purpose of Toolbar is to display its children with an inline display (elements are placed next to each other), something Appbar doesn't do. The AppBar component uses display: flex and flex-direction: column, that means direct descendants are stacked on top of each other. On the other hand Toolbar uses display: flex too, but doesn't set flex-direction, which means it uses its default value: row. That being said, the Button component uses display: inline-block. Thats the reason why elements are placed next to each other inside Toolbar components.

例如，我们有一个 Appbar 和一个 Toolbar ，其中有两个 Button 作为子代:

Let say, for example, we have an Appbar with a Toolbar with two Buttons as children:

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

显示此代码的结果 此处

但是，如果我们删除工具栏并将按钮放置在 AppBar 组件的正下方:

But, if we remove the Toolbar and place the Buttons directly under the AppBar component:

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

结果将有很大的不同(显示在此处)，因为现在按钮是 AppBar 组件的直接后代，因此它们将堆叠在一起.

the result will be very different (shown here), because now the buttons are direct descendants of the AppBar component and so, they will be stacked on top of each other.

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

As you see, AppBar and Toolbar have different purposes. Thats why I think Toolbar will never go away.

这篇关于什么是AppBar vs ToolBar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！