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.
