Вкладки v-tabs

Компонент v-tabs в библиотеке Vuetify используется для создания многоуровневых интерфейсов с переключаемыми вкладками. Он позволяет организовать контент в логические секции, которые удобно отображать и скрывать в зависимости от выбора пользователя. Основными элементами системы вкладок являются:

  • v-tabs – контейнер для набора вкладок. Управляет активной вкладкой и общей визуальной структурой.
  • v-tab – отдельная вкладка. Содержит заголовок и может быть связана с соответствующим контентом.
  • v-tabs-items – контейнер для контента вкладок. Каждый элемент соответствует одной вкладке.
  • v-tab-item – контент одной вкладки. Связывается с v-tab через индекс или идентификатор.

Простейшая структура выглядит следующим образом:

<v-tabs v-model="activeTab">
  <v-tab>Вкладка 1</v-tab>
  <v-tab>Вкладка 2</v-tab>
  <v-tab>Вкладка 3</v-tab>
</v-tabs>

<v-tabs-items v-model="activeTab">
  <v-tab-item>Контент вкладки 1</v-tab-item>
  <v-tab-item>Контент вкладки 2</v-tab-item>
  <v-tab-item>Контент вкладки 3</v-tab-item>
</v-tabs-items>

Здесь v-model связывает активную вкладку с переменной activeTab во Vue-компоненте, обеспечивая реактивное обновление контента при переключении.

Управление состоянием и навигация

v-tabs поддерживает несколько способов управления активной вкладкой:

  • v-model – основной метод, связывающий вкладки с реактивной переменной.
  • props: value или model-value – альтернативный способ управления состоянием.
  • Методы программного переключения – можно программно изменять активную вкладку, изменяя значение реактивной переменной.

Пример динамического управления вкладками:

<script setup>
import { ref } from 'vue'

const activeTab = ref(0)

function goToNextTab() {
  if (activeTab.value < 2) activeTab.value++
}
</script>

<v-tabs v-model="activeTab">
  <v-tab>Вкладка 1</v-tab>
  <v-tab>Вкладка 2</v-tab>
  <v-tab>Вкладка 3</v-tab>
</v-tabs>

<v-tabs-items v-model="activeTab">
  <v-tab-item>Контент 1</v-tab-item>
  <v-tab-item>Контент 2</v-tab-item>
  <v-tab-item>Контент 3</v-tab-item>
</v-tabs-items>

<v-btn @click="goToNextTab">Следующая вкладка</v-btn>

Индексация и привязка вкладок

Для точной привязки вкладок к контенту можно использовать props: value в v-tab и v-tab-item. Это особенно полезно при динамически формируемых вкладках:

<v-tabs v-model="activeTab">
  <v-tab value="home">Главная</v-tab>
  <v-tab value="profile">Профиль</v-tab>
  <v-tab value="settings">Настройки</v-tab>
</v-tabs>

<v-tabs-items v-model="activeTab">
  <v-tab-item value="home">Контент главной</v-tab-item>
  <v-tab-item value="profile">Контент профиля</v-tab-item>
  <v-tab-item value="settings">Контент настроек</v-tab-item>
</v-tabs-items>

Такой подход позволяет не зависеть от порядка элементов и легко управлять вкладками динамически.

Стилизация и кастомизация

v-tabs поддерживает широкие возможности кастомизации:

  • Пропсы для внешнего вида:

    • background-color – цвет фона панели вкладок.
    • color – цвет активной вкладки.
    • slider-color – цвет индикатора активной вкладки.
    • grow – равномерное растягивание вкладок по ширине.
    • vertical – вертикальное расположение вкладок.

  • Кастомные компоненты внутри вкладок: Можно использовать иконки, текст, аватары, комбинировать с v-icon, v-badge и другими элементами:

<v-tabs v-model="activeTab" background-color="primary" color="white" slider-color="yellow">
  <v-tab>
    <v-icon left>mdi-home</v-icon>
    Главная
  </v-tab>
  <v-tab>
    <v-icon left>mdi-account</v-icon>
    Профиль
  </v-tab>
</v-tabs>
  • Классы и стили: стандартные CSS-классы v-tabs, v-tab, v-tab-item позволяют добавлять кастомные стили через scoped CSS или Tailwind.

Динамические вкладки

Для создания динамических вкладок данные часто хранятся в массиве:

<script setup>
import { ref } from 'vue'

const tabs = ref([
  { title: 'Главная', content: 'Контент главной' },
  { title: 'Профиль', content: 'Контент профиля' },
  { title: 'Настройки', content: 'Контент настроек' }
])

const activeTab = ref(0)
</script>

<v-tabs v-model="activeTab">
  <v-tab v-for="(tab, index) in tabs" :key="index">{{ tab.title }}</v-tab>
</v-tabs>

<v-tabs-items v-model="activeTab">
  <v-tab-item v-for="(tab, index) in tabs" :key="index">{{ tab.content }}</v-tab-item>
</v-tabs-items>

Такой подход обеспечивает полную реактивность и позволяет легко добавлять, удалять или изменять вкладки.

Адаптивность и мобильные устройства

v-tabs автоматически поддерживает адаптивность:

  • Горизонтальная прокрутка вкладок, если их слишком много для ширины экрана.
  • Свойство show-arrows отображает стрелки прокрутки для навигации.
  • Для мобильных интерфейсов рекомендуется использовать scrollable:
<v-tabs v-model="activeTab" show-arrows scrollable>
  <v-tab v-for="tab in 10" :key="tab">Вкладка {{ tab }}</v-tab>
</v-tabs>

Интеграция с маршрутизатором Vue Router

Можно связать вкладки с маршрутизатором, используя to:

<v-tabs>
  <v-tab to="/home">Главная</v-tab>
  <v-tab to="/profile">Профиль</v-tab>
  <v-tab to="/settings">Настройки</v-tab>
</v-tabs>

Активная вкладка будет автоматически соответствовать текущему маршруту, что упрощает навигацию в SPA.

Дополнительные возможности

  • Lazy Loading контента – через проп lazy у v-tab-item загружается контент только при первом открытии вкладки, что экономит ресурсы.
  • Custom icons and badges – интеграция с v-icon, v-badge для индикации уведомлений на вкладках.
  • Events – события @change, @click для отслеживания переключений вкладок и выполнения дополнительной логики.
<v-tabs v-model="activeTab" @change="onTabChange">
  <v-tab>Вкладка 1</v-tab>
  <v-tab>Вкладка 2</v-tab>
</v-tabs>
<script setup>
function onTabChange(newValue) {
  console.log('Активная вкладка:', newValue)
}
</script>

Эти возможности делают v-tabs мощным инструментом для организации интерфейсов, позволяя создавать как простые панели вкладок, так и сложные динамические структуры с полной кастомизацией и интеграцией с маршрутизатором и реактивными данными.

Оглавление