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

Alo*_*hor 8 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)都是至关重要的,因为它通常是站点导航的主要来源。app-bar组件与v-navigation-drawer结合使用非常好,可在您的应用程序中提供站点导航。

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

v-toolbar组件对于任何GUI都是至关重要的,因为它通常是站点导航的主要来源。工具栏组件可与v-navigation-drawer和v-card结合使用。

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

Cat*_*nor 29

根据Vuetify 迁移指南——“从 v1.5.x 迁移到 v2.0.x”

v-toolbar:所有现有的滚动技术和应用程序功能都已弃用并移至 v-app-bar。

因此,从 Vuetify 2.0 开始,v-app-bar您可能希望在大多数典型应用程序的顶部使用,因为您可以执行与滚动相关的效果并使用prop将其指定v-app-bar为独特的“顶级”应用程序组件app

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

  • 为什么工具栏文档页面的最顶部没有显示“已弃用”或类似内容? (3认同)
  • 为什么有人会通过旧的移民文件来查找类似的内容?这太愚蠢了。 (3认同)

Ohg*_*why 13

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

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

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