Firstly, What is Vuetify?
Vueify is a Material Design Framework, Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.
Vuetify is a popular UI framework for Vue apps. In this article, we’ll look at how to work with the Vuetify framework.
Prominent App Bar with Scroll Shrink
We can add the shrink-to-scroll prop to make the app bar shrink on scroll. 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="indigo darken-2"
dark
shrink-on-scroll
prominent
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: 1000px;"></v-container>
</v-sheet>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the v-app-bar with the v-sheet as the scroll target to watch for to determine the height of the app bar. The app bar will shrink when we scroll the v-sheet component.
Prominent App Bar with Scroll Shrink and Image
We can add a background image to the app bar. 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="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
></v-img>
</template>
<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: 1000px;"></v-container>
</v-sheet>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to add a background image with the src prop.
Also, we add a gradient with the v-img component to add a gradient background.
Hiding on Scroll
We can also hide the app bar with the hide-on-scroll prop. For instance, 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="teal lighten-3"
dark
hide-on-scroll
prominent
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: 1000px;"></v-container>
</v-sheet>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We just add the hide-on-scroll prop with the scroll-target to hide the app bar when the scroll target is being scrolled.
Conclusion
We can change the app bar our way on scroll with Vuetify