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.
v-app-bar component is used for application-wide actions and information.
<v-btn>s with the icon prop are used inside of
v-app-bar they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a
<div>, you will need to apply negative margin to that container in order to properly align them.
You can make app-bar dense. A dense app bar has lower height than regular one
Prominent w/ scroll shrink
v-app-bar with the
prominent prop can opt to have its height shrunk as the user scrolls down. This provides a smooth transition to taking up less visual space when the user is scrolling through content. Shrink height has 2 possible options, dense (48px) and short (56px) sizes.
Prominent w/ scroll shrink and image
v-app-bar can contain background images. You can set source via the
src prop. If you need to customize the
v-img properties, the app-bar provides you with an img slot.
Hiding on scroll
v-app-bar can be hidden on scroll. Use the
hide-on-scroll property for this.
With the collapse and collapse-on-scroll props you can easily control the state of toolbar that the user interacts with.
Elevate bar on scroll
When using the elevate-on-scroll prop, the
v-app-bar will rest at an elevation of 0dp until the user begins to scroll down. Once scrolling, the bar raises to 4dp.
When using the inverted-scroll property, the bar will hide until the user scrolls past the designated threshold. Once past the threshold, the
v-app-bar will continue to display until the users scrolls up past the threshold. If no scroll-threshold value is supplied a default value of 0 will be used.
v-app-bar can have scroll threshold. It will start reacting to scroll only after defined via
scroll-threshold property amount of pixels.
Prominent w/ scroll shrink and image, fading on scroll
The background image of a
v-app-bar can fade on scroll. Use the
fade-img-on-scroll property for this.