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.
Conclusion
We can change the behavior of the app bar with various props.
