Vuetify — Tabs

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.

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>…