Футер v-footer

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

Структура и базовое использование

Базовый синтаксис v-footer выглядит следующим образом:

<v-footer
  app
  color="primary"
  height="64"
>
  <v-row
    align="center"
    justify="space-between"
    class="px-4"
  >
    <div>© 2026 Компания</div>
    <v-btn text>Политика конфиденциальности</v-btn>
  </v-row>
</v-footer>

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

  • app — привязывает футер к v-app, чтобы он корректно учитывал высоту основной области контента.
  • color — определяет фон футера, может использовать любую цветовую палитру Vuetify или кастомный цвет.
  • height — фиксированная высота футера. По умолчанию 64px, но может быть адаптирована под дизайн.
  • absolute: делает футер абсолютным, располагая его поверх контента, а не смещая страницу.
  • fixed: закрепляет футер внизу окна браузера при прокрутке.
  • height: задаёт фиксированную высоту футера.
  • inset: смещает футер относительно края контейнера, полезно при использовании v-navigation-drawer.
  • padless: убирает внутренние отступы для создания футера на всю ширину.
  • scroll-off-screen: автоматически скрывает футер при скролле вниз и возвращает при скролле вверх (только с fixed).

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

<v-footer
  fixed
  height="80"
  color="indigo"
  dark
  scroll-off-screen
>
  <v-row align="center" justify="center">
    <span>Разработано с Vuetify</span>
  </v-row>
</v-footer>

Работа с адаптивностью

Vuetify использует сетку v-container → v-row → v-col для адаптивного размещения контента внутри футера. Для корректного отображения на мобильных устройствах рекомендуется:

<v-footer color="grey lighten-3" height="80">
  <v-container>
    <v-row>
      <v-col cols="12" sm="6">
        <span>© 2026 Все права защищены</span>
      </v-col>
      <v-col cols="12" sm="6" class="text-sm-right">
        <v-btn text small>Политика конфиденциальности</v-btn>
      </v-col>
    </v-row>
  </v-container>
</v-footer>

Особенности:

  • cols="12" — колонка занимает всю ширину на мобильных устройствах.
  • sm="6" — на экранах размера sm и выше колонка занимает половину ширины.
  • Класс text-sm-right выравнивает текст по правому краю только на больших экранах.

Темная и светлая темы

v-footer полностью интегрирован с системами тем Vuetify. Используются свойства:

  • dark — активирует тёмную тему для футера и вложенных элементов.
  • light — активирует светлую тему.
<v-footer color="deep-purple accent-4" dark>
  <v-row justify="center">
    <span class="white--text">Тёмная тема футера</span>
  </v-row>
</v-footer>

Футер с навигацией и кнопками

v-footer часто используется совместно с кнопками и иконками для навигации:

<v-footer color="blue-grey darken-3" height="70" app>
  <v-row justify="space-around">
    <v-btn icon>
      <v-icon>mdi-home</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-email</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-account</v-icon>
    </v-btn>
  </v-row>
</v-footer>

Пояснения:

  • mdi- — иконки Material Design.
  • v-btn icon — кнопка только с иконкой без текста.
  • justify="space-around" равномерно распределяет элементы футера по горизонтали.

Анимации и поведение при прокрутке

Для создания футеров, скрывающихся при прокрутке вниз:

<v-footer
  fixed
  height="64"
  color="teal"
  scroll-off-screen
>
  <v-row justify="center">
    <span class="white--text">Футер скрывается при скролле вниз</span>
  </v-row>
</v-footer>

Использование scroll-off-screen повышает UX, особенно при мобильных интерфейсах, освобождая пространство для контента при прокрутке.

Интеграция с v-app-bar и v-navigation-drawer

Для корректного отображения верхней и нижней панели с навигацией:

  • v-footer app и v-app-bar app учитывают размеры друг друга.
  • Использование inset в футере позволяет корректно размещать его рядом с v-navigation-drawer без перекрытия контента.
<v-navigation-drawer app>
  <!-- меню -->
</v-navigation-drawer>

<v-app-bar app color="primary">
  <v-toolbar-title>Название приложения</v-toolbar-title>
</v-app-bar>

<v-main>
  <v-container>
    <p>Основной контент страницы</p>
  </v-container>
</v-main>

<v-footer app color="primary" dark>
  <v-row justify="center">
    <span>Футер интегрирован с App Bar и Drawer</span>
  </v-row>
</v-footer>

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

v-footer поддерживает любые CSS-классы и стили для кастомного оформления:

<v-footer class="custom-footer" height="100">
  <v-row justify="space-between" class="px-6">
    <span class="footer-left">Левый блок</span>
    <span class="footer-right">Правый блок</span>
  </v-row>
</v-footer>

<style scoped>
.custom-footer {
  background: linear-gradient(90deg, #4caf50, #81c784);
  color: white;
}
.footer-left {
  font-weight: bold;
}
.footer-right {
  font-style: italic;
}
</style>

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

Оглавление