Панель приложения v-app-bar

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

<template>
  <v-app-bar app color="primary" dark>
    <v-toolbar-title>Моё приложение</v-toolbar-title>
  </v-app-bar>
</template>
  • Атрибут app связывает панель с макетом приложения, автоматически подстраивая отступы и позиционирование.
  • Атрибут color задает фон панели.
  • Атрибут dark переключает цвет текста на светлый, обеспечивая контраст на темном фоне.

Основные свойства и их применение

app

Обеспечивает интеграцию панели с макетом v-app, чтобы содержимое страницы не перекрывалось и автоматически смещалось вниз на высоту панели.

color и dark/light

Позволяют управлять визуальной частью панели. Возможные значения цвета — стандартные палитры Vuetify (primary, secondary, success, error и др.).

<v-app-bar color="secondary" light>
  <v-toolbar-title>Пример светлой панели</v-toolbar-title>
</v-app-bar>

dense и prominent

  • dense уменьшает высоту панели, что удобно для мобильных устройств.
  • prominent увеличивает высоту панели, делая ее более заметной.
<v-app-bar dense color="primary" dark>
  <v-toolbar-title>Уплотнённая панель</v-toolbar-title>
</v-app-bar>

fixed и absolute

  • fixed закрепляет панель в верхней части экрана при прокрутке содержимого.
  • absolute позиционирует панель относительно контейнера без влияния на поток документа.
<v-app-bar fixed app color="primary" dark>
  <v-toolbar-title>Закрепленная панель</v-toolbar-title>
</v-app-bar>

hide-on-scroll

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

<v-app-bar app hide-on-scroll color="primary" dark>
  <v-toolbar-title>Скрытие при прокрутке</v-toolbar-title>
</v-app-bar>

Добавление элементов в панель

Заголовок и иконки

v-toolbar-title задаёт основной заголовок панели, а компоненты v-btn и v-icon позволяют размещать кнопки действий и иконки.

<v-app-bar app color="primary" dark>
  <v-toolbar-title>Моё приложение</v-toolbar-title>
  <v-spacer></v-spacer>
  <v-btn icon>
    <v-icon>mdi-magnify</v-icon>
  </v-btn>
  <v-btn icon>
    <v-icon>mdi-bell</v-icon>
  </v-btn>
</v-app-bar>
  • v-spacer используется для автоматического распределения пространства между элементами.
  • v-btn с icon делает кнопку компактной для размещения в панели.

Навигационное меню

Для бокового меню или панели навигации можно использовать v-app-bar-nav-icon, который часто применяется совместно с v-navigation-drawer:

<v-app-bar app color="primary" dark>
  <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
  <v-toolbar-title>Приложение</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer v-model="drawer" app>
  <v-list>
    <v-list-item link>
      <v-list-item-title>Главная</v-list-item-title>
    </v-list-item>
    <v-list-item link>
      <v-list-item-title>Настройки</v-list-item-title>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

Адаптивность и реактивность

v-app-bar поддерживает реактивное поведение с помощью v-model и слотов. Панель может динамически менять содержимое в зависимости от состояния приложения.

  • Использование slots позволяет внедрять любые компоненты, например поиск, кнопки действий, аватар пользователя.
  • Свойство clipped-left/right интегрирует панель с выдвижными меню, предотвращая перекрытие контента.
<v-app-bar app clipped-left color="primary" dark>
  <v-toolbar-title>Clipped Left Example</v-toolbar-title>
</v-app-bar>

Пользовательские стили и кастомизация

Vuetify предоставляет гибкие возможности для стилизации v-app-bar:

  • Использование классов elevation-{n} для добавления теней.
  • Применение CSS-переменных для изменения цветов фона и текста.
  • Настройка высоты панели через свойство height.
<v-app-bar app color="deep-purple accent-4" dark height="80">
  <v-toolbar-title>Высокая кастомная панель</v-toolbar-title>
</v-app-bar>

Комбинации с другими компонентами

  • v-main — основной контейнер приложения под панелью.
  • v-footer — нижняя панель, которая может быть зафиксирована аналогично верхней.
  • v-navigation-drawer — боковое меню, тесно интегрируемое с v-app-bar через свойства clipped и app.
<v-app>
  <v-app-bar app color="primary" dark>
    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    <v-toolbar-title>Приложение</v-toolbar-title>
  </v-app-bar>

  <v-navigation-drawer v-model="drawer" app>
    <v-list>
      <v-list-item link>
        <v-list-item-title>Пункт меню</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>

  <v-main>
    <v-container>
      Основной контент
    </v-container>
  </v-main>
</v-app>

Резюме возможностей

  • Закрепление или абсолютное позиционирование панели.
  • Автоматическое скрытие при прокрутке.
  • Поддержка плотных и выдающихся размеров (dense, prominent).
  • Полная интеграция с макетом приложения через app.
  • Возможность размещения кнопок, иконок, заголовков, поисковых форм и других компонентов через слоты.
  • Адаптивность для мобильных и десктопных устройств.
  • Легкая кастомизация цвета, высоты и теней через свойства и классы Vuetify.

Такой подход обеспечивает v-app-bar как универсальный инструмент для организации верхней панели в любом Vue-приложении, обеспечивая одновременно эстетичность и функциональность.

Оглавление