QTabs вкладки

QTabs — это компонент библиотеки Quasar Framework, предназначенный для организации интерфейса с вкладками. Он позволяет создавать горизонтальные или вертикальные вкладки с динамическим управлением контентом. Основной принцип работы заключается в синхронизации активной вкладки с соответствующим содержимым через v-model или model-value.

<q-tabs v-model="tab" class="text-teal" indicator-color="primary">
  <q-tab name="tab1" label="Вкладка 1" />
  <q-tab name="tab2" label="Вкладка 2" />
</q-tabs>

<q-tab-panels v-model="tab">
  <q-tab-panel name="tab1">Содержимое первой вкладки</q-tab-panel>
  <q-tab-panel name="tab2">Содержимое второй вкладки</q-tab-panel>
</q-tab-panels>

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

  • v-model связывает активную вкладку с переменной в data.
  • name у q-tab и q-tab-panel должен совпадать, чтобы панели корректно отображались.
  • indicator-color задаёт цвет индикатора активной вкладки.

Стилизация вкладок

QTabs предоставляет богатые возможности кастомизации через классы и свойства. Можно управлять цветом текста, фона и индикатора, а также положением вкладок:

  • Цвет текста вкладки — через классы text-* (text-primary, text-accent и т.д.).

  • Цвет индикатора — через indicator-color.

  • Фон панели вкладок — через class или style на контейнере q-tab-panels.

  • Выравнивание вкладок — свойства align и vertical:

    <q-tabs v-model="tab" align="justify" vertical>

align может принимать значения left, center, right или justify. Вертикальные вкладки активируются с помощью vertical, что удобно для боковых меню.

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

Вкладки могут создаваться и удаляться динамически. Для этого используется массив объектов с данными о вкладках и цикл v-for:

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

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

Динамическое управление позволяет добавлять вкладки по клику и удалять их без перезагрузки страницы.

Lazy Loading содержимого

Для оптимизации загрузки большого объема контента используется lazy:

<q-tab-panel name="tab1" lazy>
  <heavy-component />
</q-tab-panel>

Lazy-загрузка гарантирует, что компонент внутри вкладки будет инициализирован только при первом отображении, экономя ресурсы.

События и реактивность

QTabs и QTabPanels поддерживают следующие события:

  • @input — срабатывает при смене активной вкладки.
  • @update:model-value — аналогично v-model, позволяет отслеживать изменение активной вкладки.
  • @click на q-tab — используется для кастомной логики при клике.
<q-tabs v-model="tab" @input="onTabChange">
  <q-tab name="tab1" label="Вкладка 1" />
</q-tabs>

methods: {
  onTabChange(newTab) {
    console.log('Активная вкладка:', newTab);
  }
}

Вкладки с иконками и комбинированные элементы

QTab поддерживает иконки, расположенные слева или справа от текста. Можно использовать встроенные иконки Quasar:

<q-tab name="tab1" label="Главная" icon="home" />
<q-tab name="tab2" label="Настройки" icon="settings" icon-right />

Иконка справа задается через icon-right, слева — через стандартное icon.

Прокрутка и адаптивность

Когда количество вкладок превышает ширину контейнера, можно включить прокрутку:

<q-tabs v-model="tab" shrink scrollable>

Свойства:

  • shrink — уменьшает вкладки по ширине.
  • scrollable — активирует горизонтальную прокрутку.
  • dense — уменьшает высоту вкладок, полезно для компактных интерфейсов.

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

QTabs можно связать с Vue Router, чтобы вкладка изменялась при переходе по маршруту:

<q-tabs v-model="$route.name">
  <q-tab name="home" label="Главная" to="/home" />
  <q-tab name="profile" label="Профиль" to="/profile" />
</q-tabs>

Такое решение позволяет синхронизировать вкладки с адресной строкой и использовать переходы без дополнительных обработчиков событий.

Комбинирование с QScrollArea и QToolbar

Для создания сложных интерфейсов вкладки можно помещать в QScrollArea для прокручиваемого контента или использовать QToolbar для закрепленных вкладок:

<q-toolbar>
  <q-tabs v-model="tab" align="justify">
    <q-tab name="tab1" label="Новости" />
    <q-tab name="tab2" label="Сообщения" />
  </q-tabs>
</q-toolbar>
<q-scroll-area>
  <q-tab-panels v-model="tab">
    <q-tab-panel name="tab1">Новости...</q-tab-panel>
    <q-tab-panel name="tab2">Сообщения...</q-tab-panel>
  </q-tab-panels>
</q-scroll-area>

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

Анимации и переходы

QTabPanels поддерживает встроенные переходы между вкладками с помощью свойства transition:

<q-tab-panels v-model="tab" animated transition-prev="slide-right" transition-next="slide-left">

Параметры transition-prev и transition-next управляют анимацией при переключении вкладок в обе стороны. animated включает плавный эффект.

Эта структура охватывает все основные возможности QTabs и QTabPanels в Quasar Framework: от базовой организации вкладок до динамического контента, интеграции с роутером и сложной кастомизации интерфейса.

Оглавление