Вертикальные и горизонтальные вкладки

В библиотеке Quasar вкладки реализуются с помощью компонента <q-tabs> и тесно связанного с ним <q-tab> для отдельных элементов и <q-tab-panels> с <q-tab-panel> для контента. Правильное использование вкладок обеспечивает структурированное отображение информации и удобную навигацию по интерфейсу.

Горизонтальные вкладки

Горизонтальные вкладки по умолчанию располагаются сверху контейнера. Основные компоненты для реализации:

<q-tabs v-model="tab" dense align="justify" class="text-teal">
  <q-tab name="home" label="Главная" icon="home" />
  <q-tab name="profile" label="Профиль" icon="person" />
  <q-tab name="settings" label="Настройки" icon="settings" />
</q-tabs>

<q-tab-panels v-model="tab" animated>
  <q-tab-panel name="home">
    Контент вкладки Главная
  </q-tab-panel>
  <q-tab-panel name="profile">
    Контент вкладки Профиль
  </q-tab-panel>
  <q-tab-panel name="settings">
    Контент вкладки Настройки
  </q-tab-panel>
</q-tab-panels>

Ключевые параметры:

  • v-model="tab" – связывает активную вкладку с переменной состояния.
  • dense – уменьшает отступы, делая вкладки компактнее.
  • align="justify" – равномерно распределяет вкладки по ширине контейнера.
  • animated – добавляет плавную анимацию при переключении между вкладками.

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

Вертикальные вкладки

Для вертикального расположения используется свойство vertical у компонента <q-tabs>. Это позволяет разместить вкладки слева или справа от контента.

<div class="row">
  <q-tabs
    v-model="tab"
    vertical
    class="col-auto"
    dense
    align="left"
  >
    <q-tab name="dashboard" label="Панель" icon="dashboard" />
    <q-tab name="reports" label="Отчёты" icon="assessment" />
    <q-tab name="users" label="Пользователи" icon="group" />
  </q-tabs>

  <q-tab-panels v-model="tab" animated class="col">
    <q-tab-panel name="dashboard">
      Контент панели Панель
    </q-tab-panel>
    <q-tab-panel name="reports">
      Контент панели Отчёты
    </q-tab-panel>
    <q-tab-panel name="users">
      Контент панели Пользователи
    </q-tab-panel>
  </q-tab-panels>
</div>

Особенности вертикальных вкладок:

  • vertical – делает ориентацию вертикальной.
  • Разметка часто строится через flex-контейнер (row), где вкладки занимают col-auto, а контент — оставшуюся часть (col).
  • Иконки помогают визуально ориентироваться при большом количестве элементов.
  • Вертикальные вкладки более удобны для боковых панелей с множеством категорий.

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

Quasar предоставляет мощные возможности кастомизации через CSS-классы и встроенные параметры:

  • text-color и indicator-color – позволяют задать цвет текста и индикатора активной вкладки.
  • dense и inline-label – управляют компактностью и расположением текста относительно иконок.
  • scrollable – делает вкладки прокручиваемыми, если они не помещаются на экране.
  • class="bg-primary text-white" – позволяет комбинировать цвета фона и текста для вкладок.

Пример кастомной горизонтальной вкладки:

<q-tabs
  v-model="tab"
  class="bg-primary text-white"
  indicator-color="yellow"
  align="justify"
  dense
>
  <q-tab name="first" label="Первая" />
  <q-tab name="second" label="Вторая" />
  <q-tab name="third" label="Третья" />
</q-tabs>

Работа с динамическими вкладками

Quasar поддерживает создание вкладок на основе массива данных, что полезно при генерации контента из API или базы данных.

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

<q-tab-panels v-model="tab" animated>
  <q-tab-panel
    v-for="item in tabs"
    :key="item.name"
    :name="item.name"
  >
    {{ item.content }}
  </q-tab-panel>
</q-tab-panels>
export default {
  data() {
    return {
      tab: 'home',
      tabs: [
        { name: 'home', label: 'Главная', icon: 'home', content: 'Контент Главная' },
        { name: 'profile', label: 'Профиль', icon: 'person', content: 'Контент Профиль' },
        { name: 'settings', label: 'Настройки', icon: 'settings', content: 'Контент Настройки' },
      ]
    }
  }
}

Такой подход повышает гибкость интерфейса и облегчает поддержку большого числа вкладок.

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

Компонент <q-tab-panels> поддерживает различные эффекты перехода через атрибут animated и настройку вида анимации через CSS:

  • animated – включает плавное изменение контента.
  • Для кастомных анимаций можно использовать Vue <transition> или CSS-классы.
  • Анимации особенно заметны при вертикальном расположении вкладок, когда контент занимает значительную площадь.

Практические советы

  • Горизонтальные вкладки оптимальны для небольшого количества категорий, чтобы не перегружать верхнюю панель.
  • Вертикальные вкладки хорошо подходят для админ-панелей, боковых меню или когда нужно разместить много элементов.
  • Всегда связывать вкладки с v-model, чтобы иметь доступ к состоянию выбранной вкладки в коде.
  • Использовать dense, scrollable и кастомные цвета для улучшения UX на мобильных устройствах и при ограниченном пространстве.
  • Динамическая генерация вкладок облегчает поддержку интерфейса при увеличении числа элементов и интеграции с API.

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

Оглавление