Vuetify — Desktop Tabs

Image for post
Image for post
Photo by Cristina Gottardi 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.

Desktop Tabs

Tab actions can be represented with single icons.

For example, we can write:

<template>
<v-card>
<v-toolbar flat>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>App</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
<template v-slot:extension>
<v-tabs v-model="tabs" fixed-tabs>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#mobile-tabs-5-1" class="primary--text">
<v-icon>mdi-phone</v-icon>
</v-tab>
<v-tab href="#mobile-tabs-5-2" class="primary--text">
<v-icon>mdi-heart</v-icon>
</v-tab>
<v-tab href="#mobile-tabs-5-3" class="primary--text">
<v-icon>mdi-account-box</v-icon>
</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model="tabs">
<v-tab-item v-for="i in 3" :key="i" :value="`mobile-tabs-5-${i}`">
<v-card flat>
<v-card-text v-text="text"></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
tabs: null,
text: "Lorem ipsum dolor sit amet.",
}),
};
</script>

We add the v-icon without the text within the v-tab component to add tabs with only icons.

Tabs With Menu

We can add a menu to hold additional tabs.

When we click them, we’ll see the active one moved to the tab bar from the menu.

This can be done with our own logic.

To do that, we write:

<template>
<v-card>
<v-toolbar color="deep-purple accent-4" dark flat>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>App</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
<template v-slot:extension>
<v-tabs v-model="currentItem" fixed-tabs slider-color="white">
<v-tab v-for="item in items" :key="item" :href="`#tab-${item}`">{{ item }}</v-tab>
<v-menu v-if="more.length" bottom left>
<template v-slot:activator="{ on, attrs }">
<v-btn text class="align-self-center mr-4" v-bind="attrs" v-on="on">
more
<v-icon right>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list class="grey lighten-3">
<v-list-item v-for="item in more" :key="item" @click="addItem(item)">{{ item }}</v-list-item>
</v-list>
</v-menu>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model="currentItem">
<v-tab-item v-for="item in items.concat(more)" :key="item" :value="`tab-${item}`">
<v-card flat>
<v-card-text>
<h2>{{ item }}</h2>
{{ text }}
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
currentItem: "tab-Web",
items: ["Web", "Offers", "Videos", "Hames"],
more: ["News", "Maps", "Books", "Flights", "Play"],
text:
"Lorem ipsum dolor sit amet.",
}),
methods: {
addItem(item) {
const removed = this.items.splice(0, 1);
this.items.push(...this.more.splice(this.more.indexOf(item), 1));
this.more.push(...removed);
this.$nextTick(() => {
this.currentItem = `tab-${item}`;
});
},
},
};
</script>

In the extension slot, we have the v-tab component with the tabs displayed on the tab bar.

And the v-menu has the additional tab buttons.

When we click on the ones on the menu, the addItem method to remove the entry from the menu and put that on the tab bar by adding it to the items array.

The menu is created with the v-btn component by passing it in the on with the v-on attribute and v-bind has the attributes for the styling the menu button.

v-on has the listeners to make the menu open and close.

Conclusion

We can make tab buttons display in a menu and move it to the tab bar when clicked.

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