Vuetify — Tabs Customization

Image for post
Image for post
Photo by Austin Distel 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.

Custom Icons

We can change the tab scrolling icons with the prev-icon and next-icon props:

<template>
<v-card>
<v-tabs
v-model="tab"
background-color="primary"
show-arrows
dark
next-icon="mdi-arrow-right-bold-box-outline"
prev-icon="mdi-arrow-left-bold-box-outline"
>
<v-tab v-for="item in items" :key="item.tab">{{ item.tab }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="item in items" :key="item.tab">
<v-card flat>
<v-card-text>{{ item.content }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
items: [
{ tab: "One", content: "Tab 1 Content" },
{ tab: "Two", content: "Tab 2 Content" },
{ tab: "Three", content: "Tab 3 Content" },
{ tab: "Four", content: "Tab 4 Content" },
{ tab: "Five", content: "Tab 5 Content" },
],
};
},
};
</script>

We changed the icons to a bold arrow instead of a regular arrow.

Icons and Text

The tab links can have both an icon and text.

For instance, we can write:

<template>
<v-card>
<v-tabs v-model="tab" background-color="deep-purple accent-4" centered dark icons-and-text>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#tab-1">
Recents
<v-icon>mdi-phone</v-icon>
</v-tab>
<v-tab href="#tab-2">
Favorites
<v-icon>mdi-heart</v-icon>
</v-tab>
<v-tab href="#tab-3">
Map
<v-icon>mdi-account-box</v-icon>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`">
<v-card flat>
<v-card-text>hello world</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
};
},
};
</script>

We have the v-icon inside the v-tab component to add the icon.

The icon will show above the text.

Right-Aligned Tabs

The tabs can be aligned to the right.

For example, we can write:

<template>
<v-card>
<v-tabs background-color="white" color="deep-purple accent-4" right>
<v-tab>Foo</v-tab>
<v-tab>Bar</v-tab>
<v-tab>Baz</v-tab>
<v-tab-item v-for="n in 3" :key="n">
<v-container fluid>
<v-row>
<v-col v-for="i in 6" :key="i" cols="12" md="4">
<v-img
:src="`https://picsum.photos/500/300?image=${i}`"
:lazy-src="`https://picsum.photos/10/6?image=${i}`"
aspect-ratio="1"
></v-img>
</v-col>
</v-row>
</v-container>
</v-tab-item>
</v-tabs>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
};
},
};
</script>

The right prop makes the tab links align to the right.

Tab and Toolbar

We can put v-tabs inside the extension slow of the v-toolbar .

This will make it show at the bottom of the toolbar.

To do that, we write:

<template>
<v-card>
<v-toolbar color="cyan" 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="tab" centered slider-color="yellow">
<v-tab v-for="i in 3" :key="i" :href="`#tab-${i}`">Item {{ i }}</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model="tab">
<v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`">
<v-card flat>
<v-card-text v-text="'hello world'"></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
};
},
};
</script>

The extension slot lets us place the tab links inside the toolbar.

Conclusion

We can add tabs with icons and in different positions.

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