Vuetify — App Bar Behavior

Image for post
Image for post
Photo by Alex Knight on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Collapsible Bars

The collapse and collapse-on-scroll props can easily let us control the state of the toolbar that the user interacts with.

For example, we can write:

to collapse the scroll bar when collapseOnScroll is true .

collapseOnScroll is true when we click check the checkbox.

Elevate Bar on Scroll

The elevate-on-scroll prop with the v-app-bar component.

For example, we can write:

We just add the elevate-on-scroll to our v-app-bar to make it show a shadow when we scroll down.

Also, we have to set the scroll-target with the selector of the scroll container to make that work.

Inverted scrolling

The inverted-scroll prop lets us hide the bar until the user scrolls past the designated threshold.

For example, we can write:

We add the inverted-scroll prop to make the app bar show only when we scroll down.

Conclusion

We can change the behavior of the app bar with various props.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store