Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Tabs
We can add tabs to our Vuetify app with the v-tabs component.
For example, we can write:
<template>
<v-tabs fixed-tabs background-color="indigo" dark>
<v-tab>One</v-tab>
<v-tab>Two</v-tab>
<v-tab>Three</v-tab>
</v-tabs>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>
to show tabs.
background-color has the background color.
fixed-tabs makes its position fixed.
dark makes the text of the non-active tabs gray.
The active tab is always centered.
Tab Items
We can add the v-tab-items component to let us customize the content per tab.
For example, we can write:
<template>
<v-card>
<v-tabs v-model="tab" background-color="primary" dark>
<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>
to add tabs and populate the headings and content.
v-tab has the tab headings and v-tab-items has the tab items.
The tab state has the index of the active tab.
v-model lets us control which tab is active programmatically.
We just render all the tab content with the v-tab-item component and the right one will be displayed automatically.
Grow Tabs
We can add the grow prop to make the tag items take up all available space up to a max-width of 300px:
<template>
<v-card>
<v-tabs v-model="tab" background-color="primary" grow dark>
<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 have the grow prop to make it grow to fix the screen.
Pagination
The show-arrows prop will make the arrow display so that we can scroll through the tabs:
<template>
<v-card>
<v-tabs v-model="tab" background-color="primary" show-arrows dark>
<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>
The arrows will show when the tabs overflow the page.
Conclusion
We can add tabs with the v-tabs and tab content with the v-tab-item component.
