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.
