I just started exploring vuetify. All the vuetify componets resides in <v-app>
.
I wanted to create menu for my site so in documentation I found <v-app-bar>
and <v-toolbar>
I am confused that if I should keep menu items inside <v-app-bar>
or <v-toolbar>
as offical documentation says
About <v-app-bar>
https://vuetifyjs.com/en/components/app-bars
The
v-app-bar
component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. The app-bar component works great in conjunction with a v-navigation-drawer for providing site navigation in your application.
About <v-toolbar>
https://vuetifyjs.com/en/components/toolbars
The
v-toolbar
component is pivotal to any gui, as it generally is the primary source of site navigation. The toolbar component works great in conjunction with v-navigation-drawer and v-card.
Both the description are almost same. What is difference in both and when we should use what? or we should use v-toolbar
inside v-app-bar
?
The v-toolbar component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. The toolbar component works great in conjunction with v-navigation-drawer and v-card .
The Vuetify v-app component is an essential component and required in all applications made with the framework. It provides features such as automatic layout sizing, theming functionality and cross-browser compatibility.
Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize. css, Material Design Lite, Semantic UI and Bootstrap 4. On the other hand, Vue CLI is detailed as "Standard Tooling for Vue. js Development".
The v-icon component provides a large set of glyphs to provide context to various aspects of your application. For a list of all available icons, visit the official Material Design Icons page. To use any of these icons simply use the mdi- prefix followed by the icon name.
Per the Vuetify Migration Guide -- 'Migrating from v1.5.x to v2.0.x':
v-toolbar: All existing scrolling techniques and app functionality has been deprecated and moved to v-app-bar.
Thus, starting in Vuetify 2.0, v-app-bar
is what you probably want to use at the top of most typical apps since you can do scrolling-related effects and designate v-app-bar
as a unique 'top level' application component using the app
prop.
On the other hand, v-toolbar
could be used for other 'subordinate' cases where scrolling should definitely not affect the toolbar, perhaps if v-toolbar
is being used as part of a in-screen widget.
Actually v-app-bar
extends v-toolbar
to give you additional properties that you can use.
These properties give you far more granular control over the overall layout of the toolbar and how it responds to sizing and content changes in the surrounding space.
You can look at the properties of each and see how the v-app-bar
has a dozen or more additional properties that you can leverage to customize the functionality and design of it, whereas the toolbar
is opinionated about its purpose and limits those functionalities.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With