QTab и QTabPanel

В библиотеке Quasar компоненты QTab и QTabPanel служат для организации вкладок в интерфейсе. Их применение позволяет создавать настраиваемые панели с переключением контента без перезагрузки страницы.

QTab представляет собой визуальный элемент вкладки, который реагирует на действия пользователя, а QTabPanel содержит контент, связанный с конкретной вкладкой. Связь между ними реализуется через свойство name.

<template>
  <q-tabs v-model="tab" dense>
    <q-tab name="home" label="Главная" icon="home" />
    <q-tab name="settings" label="Настройки" icon="settings" />
  </q-tabs>

  <q-tab-panels v-model="tab">
    <q-tab-panel name="home">
      <p>Содержимое вкладки Главная</p>
    </q-tab-panel>
    <q-tab-panel name="settings">
      <p>Содержимое вкладки Настройки</p>
    </q-tab-panel>
  </q-tab-panels>
</template>

<script setup>
import { ref } from 'vue';
const tab = ref('home');
</script>

Ключевые моменты:

  • v-model управляет активной вкладкой.
  • Связь между QTab и QTabPanel осуществляется через одинаковое значение name.
  • Можно использовать иконки через атрибут icon.
  • dense уменьшает высоту вкладок, создавая компактный вид.

Навигация и управление вкладками

Компоненты Quasar позволяют динамически управлять вкладками: добавлять, удалять и программно переключаться между ними. Для этого достаточно изменить значение v-model у QTabs и QTabPanels.

<q-btn label="Перейти на Настройки" @click="tab = 'settings'" />

Использование v-for для генерации вкладок упрощает работу с динамическим списком:

<q-tabs v-model="tab" align="justify">
  <q-tab
    v-for="item in tabs"
    :key="item.name"
    :name="item.name"
    :label="item.label"
  />
</q-tabs>

<q-tab-panels v-model="tab">
  <q-tab-panel v-for="item in tabs" :key="item.name" :name="item.name">
    {{ item.content }}
  </q-tab-panel>
</q-tab-panels>

<script setup>
const tab = ref('tab1');
const tabs = [
  { name: 'tab1', label: 'Вкладка 1', content: 'Контент 1' },
  { name: 'tab2', label: 'Вкладка 2', content: 'Контент 2' },
];
</script>

Настройка внешнего вида вкладок

Quasar предоставляет широкий набор параметров для стилизации:

  • active-color и inactive-color – цвет активной и неактивной вкладки.
  • indicator-color – цвет индикатора под активной вкладкой.
  • align – выравнивание вкладок (left, center, justify).
  • dense и narrow-indicator – компактный вид и узкий индикатор.
<q-tabs
  v-model="tab"
  active-color="primary"
  indicator-color="accent"
  align="center"
  dense
>
  <q-tab name="one" label="Один" />
  <q-tab name="two" label="Два" />
</q-tabs>

Асинхронная подгрузка контента

Для экономии ресурсов часто используется ленивое отображение контента. Атрибут keep-alive позволяет сохранять состояние панели при переключении:

<q-tab-panels v-model="tab" animated keep-alive>
  <q-tab-panel name="one">
    <AsyncComponentOne />
  </q-tab-panel>
  <q-tab-panel name="two">
    <AsyncComponentTwo />
  </q-tab-panel>
</q-tab-panels>
  • animated добавляет плавное переключение между панелями.
  • keep-alive предотвращает повторный рендер компонентов при возврате к вкладке.

Взаимодействие с событиями

QTab и QTabPanels поддерживают события:

  • @input – срабатывает при изменении активной вкладки.
  • @click на QTab – можно обрабатывать индивидуальные клики.
  • @show и @hide на QTabPanel – отслеживание отображения контента.
<q-tabs v-model="tab" @input="onTabChange">
  <q-tab name="home" label="Главная" />
</q-tabs>

<script setup>
function onTabChange(name) {
  console.log('Активная вкладка:', name);
}
</script>

Интеграция с роутером

Для приложений с Vue Router часто требуется синхронизация вкладок с маршрутом. Это реализуется через привязку v-model к текущему пути:

<q-tabs v-model="$route.name">
  <q-tab name="home" label="Главная" />
  <q-tab name="about" label="О приложении" />
</q-tabs>

<q-tab-panels v-model="$route.name">
  <q-tab-panel name="home">
    <HomePage />
  </q-tab-panel>
  <q-tab-panel name="about">
    <AboutPage />
  </q-tab-panel>
</q-tab-panels>

Такое решение позволяет менять вкладки при навигации и обновлять URL без лишнего кода.

Продвинутые возможности

  • Lazy tabs – загружать контент только при первом отображении.
  • Custom tab content – вставка иконок, бейджей и кастомных шаблонов через слот default.
  • Nested tabs – использование вкладок внутри других вкладок для создания сложных интерфейсов.
<q-tab name="profile">
  <template v-slot:default>
    <q-icon name="person" />
    Профиль
  </template>
</q-tab>

Эти возможности делают QTab и QTabPanel гибким инструментом для построения современных интерфейсов с динамическим и настраиваемым содержанием.

Оглавление