Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
System Bars Lights Out Effect
We can add a lights out effect to our v-system-bar .
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card img="https://cdn.vuetifyjs.com/images/home/vuetify_layout2.svg" height="200px">
<v-system-bar color="primary" lights-out>
<v-spacer></v-spacer>
<v-icon>mdi-wifi-strength-4</v-icon>
<v-icon>mdi-signal-cellular-outline</v-icon>
<v-icon>mdi-battery</v-icon>
<span>12:30</span>
</v-system-bar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
The light-out prop make the content become black.
We can add the dark prop to make the content text white:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card img="https://cdn.vuetifyjs.com/images/home/vuetify_layout2.svg" height="200px">
<v-system-bar color="primary" lights-out dark>
<v-spacer></v-spacer>
<v-icon>mdi-wifi-strength-4</v-icon>
<v-icon>mdi-signal-cellular-outline</v-icon>
<v-icon>mdi-battery</v-icon>
<span>12:30</span>
</v-system-bar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Window Bar
We can add a window bar with v-system-bar with window controls and status info.
For instance, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-system-bar window dark>
<v-icon>mdi-message</v-icon>
<span>100 unread messages</span>
<v-spacer></v-spacer>
<v-icon>mdi-minus</v-icon>
<v-icon>mdi-checkbox-blank-outline</v-icon>
<v-icon>mdi-close</v-icon>
</v-system-bar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We just add the window prop to make the system bar have a black background.
Bottom Navigation
The v-bottom-navigation component is an alternative to the sidebar.
It comes with the icons and text and shift variants.
We can add one by writing:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-bottom-navigation :value="activeBtn" color="purple lighten-1">
<v-btn>
<span>History</span>
<v-icon>mdi-history</v-icon>
</v-btn>
<v-btn>
<span>Favorites</span>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn>
<span>Map</span>
<v-icon>mdi-map-marker</v-icon>
</v-btn>
</v-bottom-navigation>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
activeBtn: undefined,
}),
};
</script>
We have a v-bottom-navigation component with 3 v-btn components to show buttons.
Grow
We add the grow prop to spread the buttons to fill available space:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-bottom-navigation :value="activeBtn" color="purple lighten-1" grow>
<v-btn>
<span>History</span>
<v-icon>mdi-history</v-icon>
</v-btn>
<v-btn>
<span>Favorites</span>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn>
<span>Map</span>
<v-icon>mdi-map-marker</v-icon>
</v-btn>
</v-bottom-navigation>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
activeBtn: undefined,
}),
};
</script>
Conclusion
We can add effects to our system bar with Vuetify.
Also, we can add a bottom navigation bar with it.
