什么是AppBar vs ToolBar？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

https://material.io/design/components/并

没有 有工具栏组成部分，只有“应用吧：顶”。

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

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

回答：

我正在查看每个组件产生的默认CSS属性。 的主要目的是通过内联显示（子元素彼此相邻）显示其子项，而 则不行。所述

部件用途 显示：柔性 和 弯曲方向：柱 ，该装置直接后代被堆叠在彼此的顶部。另一方面， 使用

display：flex ，但未设置 flex-direction ，这意味着它使用其默认值： row 。就是说，

组件使用 display：inline-block 。这就是为什么在 组件内将元素彼此相邻放置的原因。

让说，例如，我们有一个 与 有两个 S作为孩子：

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

此代码的结果显示 在此处

但是，如果我们删除 并将 放置在 组件的正下方：

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

其结果将是非常不同的（示出在这里），因为现在的按钮是直接后代的

部件等，它们会在彼此的顶部堆叠。

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

以上是 什么是AppBar vs ToolBar？ 的全部内容， 来源链接： utcz.com/qa/419802.html

回到顶部