Как использовать вкладки в Vuetify

Вкладки — отличный способ упорядочить содержимое и добавить в приложение дополнительную иерархию навигации. В этой статье мы узнаем, как создавать их в Vuetify.

v-вкладки и v-вкладки

Вкладка Vuetify создается с компонентом v-tab, заключенным внутри компонента v-tabs:

<template>
  <v-app>
    <v-tabs>
      <v-tab>Tab 1</v-tab>
      <v-tab>Tab 2</v-tab>
      <v-tab>Tab 3</v-tab>
    </v-tabs>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Выравнивание вкладок с заголовком панели инструментов

Мы можем выровнять v-tabs с компонентом v-toolbar-title, используя реквизит align-with-title:

<template>
  <v-app>
    <v-card>
      <v-toolbar color="green" dark flat>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Your Dashboard</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" align-with-title>
            <v-tabs-slider color="white"></v-tabs-slider>
            <v-tab v-for="item in items" :key="item">
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item">
          <v-card flat>
            <v-card-text v-text="text"></v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      tab: null,
      items: ['web', 'shopping', 'videos', 'images', 'news'],
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    };
  },
};
</script>

Без установки реквизита align-with-title для компонента v-tabs это выглядело бы так:

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Скачать бесплатную копию здесь!

Центрально-активная опора

Установка свойства center-active на true в компоненте v-tabs сделает активную вкладку всегда центрированной. Например:

<template>
  <v-app>
    <v-card>
      <v-tabs background-color="primary" center-active dark>
        <v-tab>One</v-tab>
        <v-tab>Two</v-tab>
        <v-tab>Three</v-tab>
        <v-tab>Four</v-tab>
        <v-tab>Five</v-tab>
        <v-tab>Six</v-tab>
        <v-tab>Seven</v-tab>
        <v-tab>Eight</v-tab>
        <v-tab>Nine</v-tab>
        <v-tab>Ten</v-tab>
        <v-tab>Eleven</v-tab>
        <v-tab>Twelve</v-tab>
        <v-tab>Thirteen</v-tab>
        <v-tab>Fourteen</v-tab>
        <v-tab>Fifteen</v-tab>
        <v-tab>Sixteen</v-tab>
        <v-tab>Seventeen</v-tab>
        <v-tab>Eighteen</v-tab>
        <v-tab>Nineteen</v-tab>
        <v-tab>Twenty</v-tab>
      </v-tabs>
    </v-card>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Нажатие на другую вкладку сделает ее активной и отцентрирует ее:

Пользовательские значки вкладок

С помощью next-icon и prev-icon props мы можем настроить значок, используемый для навигации по всем заголовкам вкладок.

<template>
  <v-app>
    <v-sheet elevation="6">
      <v-tabs
        background-color="red"
        dark
        next-icon="mdi-arrow-right-bold-box-outline"
        prev-icon="mdi-arrow-left-bold-box-outline"
        show-arrows
      >
        <v-tabs-slider color="orange"></v-tabs-slider>
        <v-tab v-for="i in 20" :key="i" :href="'#tab-' + i">
          Item {{ i }}
        </v-tab>
      </v-tabs>
    </v-sheet>
  </v-app>
</template>
...

Фиксированные вкладки

С помощью реквизита fixed-tabs мы можем заставить компоненты v-tab заполнять все доступное пространство, пока они не достигнут максимальной ширины (300 пикселей):

<template>
  <v-app>
    <v-tabs fixed-tabs dark>
      <v-tab> City </v-tab>
      <v-tab> Nature </v-tab>
      <v-tab> Art </v-tab>
      <v-tab> Sky </v-tab>
    </v-tabs>
  </v-app>
</template>
...

Растущая опора

Установка свойства grow в значение true для компонента v-tabs делает то же самое, что и установка свойства fixed-tabs. Это заставляет вкладки занимать все доступное пространство до максимальной ширины 300 пикселей:

<template>
  <v-app>
    <v-tabs grow dark>
      <v-tab> City </v-tab>
      <v-tab> Nature </v-tab>
      <v-tab> Art </v-tab>
      <v-tab> Sky </v-tab>
    </v-tabs>
  </v-app>
</template>
...

Использование значков в заголовках вкладок

Мы можем настроить компоненты вкладки Vuetify, чтобы разрешить использование значков в их заголовках с реквизитом icons-with-text. Установка этого реквизита на true увеличит высоту компонента v-tabs до 72 пикселей, чтобы можно было использовать как значки, так и текст.

Краткое содержание

Vuetify позволяет нам создавать и настраивать вкладки с компонентами v-tabs и v-tab. Мы можем настроить определенные свойства этих вкладок, такие как стиль их цвета и ширины.

Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов от нас!

Получить обновленную статью на codingbeautydev.com.