vuetify中的v-app-bar和v-toolbar有什么区别?

时间:2019-09-23 18:24:26

标签: vue.js vuetify.js

我刚刚开始探索vuetify。所有vuetify组件都位于<v-app>中。
我想为自己的网站创建菜单,因此在文档中找到了<v-app-bar><v-toolbar>
我很困惑,如果我应该将菜单项保留在<v-app-bar><v-toolbar>中,如官方文档所述

关于<v-app-bar> https://vuetifyjs.com/en/components/app-bars

  

v-app-bar组件对于任何图形用户界面都是至关重要的   (GUI),因为它通常是网站导航的主要来源。的   应用栏组件与   v-navigation-drawer用于在您的应用程序中提供站点导航。

关于<v-toolbar> https://vuetifyjs.com/en/components/toolbars

  

v-toolbar组件对于任何gui都是至关重要的,因为通常它是   网站导航的主要来源。工具栏组件效果很好   搭配v-navigation-drawer和v-card。

两者的描述几乎相同。两者之间有什么区别,什么时候应该使用什么?还是我们应该在v-toolbar中使用v-app-bar

2 个答案:

答案 0 :(得分:5)

实际上read_excel扩展了v-app-bar,为您提供了可以使用的其他属性。

这些属性使您可以更精细地控制工具栏的总体布局以及它如何响应周围空间的大小和内容更改。

您可以查看每个属性,并查看v-toolbar如何具有十几个或更多其他属性,您可以利用这些属性来自定义其功能和设计,而v-app-bar则认为它的目的并限制了这些功能。

答案 1 :(得分:4)

根据Vuetify Migration Guide -- 'Migrating from v1.5.x to v2.0.x'

  

v工具栏:所有现有的滚动技术和应用功能   已被弃用,并移至v-app-bar。

因此,从Vuetify 2.0开始,update-database是您可能要在大多数典型应用程序顶部使用的功能,因为您可以执行与滚动相关的效果,并将v-app-bar指定为唯一的“顶级” 'application component使用v-app-bar道具。

另一方面,app可用于其他“从属”情况,其中滚动绝对不会影响工具栏,也许如果v-toolbar被用作屏幕内小部件的一部分。