Vuetify — App Bar Behavior

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:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card class="overflow-hidden">
<v-app-bar
:collapse="!collapseOnScroll"
:collapse-on-scroll="collapseOnScroll"
absolute
color="deep-purple accent-4"
dark
scroll-target="#scrolling-techniques-6"
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Collapsing Bar</v-toolbar-title> <v-spacer></v-spacer> <v-checkbox v-model="collapseOnScroll" color="white" hide-details></v-checkbox>
</v-app-bar>
<v-sheet id="scrolling-techniques-6" class="overflow-y-auto" max-height="600">
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
collapseOnScroll: false
}),
};
</script>

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:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card class="overflow-hidden">
<v-app-bar absolute color="white" elevate-on-scroll scroll-target="#scrolling">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet id="scrolling" class="overflow-y-auto" max-height="600">
<v-container style="height: 1500px;"></v-container>
</v-sheet>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

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:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="primary"
dark
inverted-scroll
scroll-target="#scrolling"
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet id="scrolling" class="overflow-y-auto" max-height="600">
<v-container style="height: 1500px;"></v-container>
</v-sheet>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

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

Photo by Patrick Tomasso on Unsplash

Conclusion

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

Web developer. Subscribe to my email list now at https://thewebdev.info/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