Нижняя навигация v-bottom-navigation

Компонент v-bottom-navigation предназначен для создания панели навигации, закреплённой внизу экрана. Он особенно полезен для мобильных интерфейсов, где важна компактная и интуитивно понятная навигация. В Vuetify 3 v-bottom-navigation реализует Material Design спецификации для нижней навигации.

Подключение и базовая структура

<template>
  <v-bottom-navigation
    v-model="active"
    grow
    color="primary"
  >
    <v-btn value="home" icon>
      <v-icon>mdi-home</v-icon>
    </v-btn>
    <v-btn value="search" icon>
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
    <v-btn value="profile" icon>
      <v-icon>mdi-account</v-icon>
    </v-btn>
  </v-bottom-navigation>
</template>

<script setup>
import { ref } from 'vue'

const active = ref('home')
</script>

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

  • v-model управляет активной кнопкой на навигационной панели.
  • Атрибут grow заставляет кнопки равномерно растягиваться по ширине.
  • color задаёт цвет фона панели.
  • Каждая кнопка v-btn может содержать иконку через компонент v-icon.

Варианты расположения и поведения

v-bottom-navigation поддерживает два основных режима отображения:

  1. Закреплённая внизу (fixed) Позволяет панели оставаться видимой при скролле страницы.
<v-bottom-navigation
  v-model="active"
  fixed
>
  ...
</v-bottom-navigation>
  1. Плавающая (absolute) Панель располагается поверх контента и может перекрывать элементы.
<v-bottom-navigation
  v-model="active"
  absolute
  color="deep-purple accent-4"
>
  ...
</v-bottom-navigation>

Работа с иконками и текстом

Каждая кнопка может содержать не только иконку, но и подпись. Для отображения текста используется слот default или атрибут label.

<v-btn value="favorites" icon>
  <v-icon>mdi-heart</v-icon>
  <span>Избранное</span>
</v-btn>

Использование v-btn с текстом обеспечивает наглядность и улучшает UX на мобильных устройствах. Важно, что наличие текста не мешает работе v-model для определения активного элемента.

Управление активным состоянием

v-bottom-navigation позволяет выделять активный элемент автоматически через v-model. Активное состояние можно кастомизировать через CSS-классы или через встроенные свойства.

<v-bottom-navigation
  v-model="active"
  color="blue lighten-2"
  active-class="my-active-class"
>
  <v-btn value="dashboard" icon>
    <v-icon>mdi-view-dashboard</v-icon>
  </v-btn>
</v-bottom-navigation>

<style>
.my-active-class {
  background-color: #ffeb3b;
}
</style>

Использование с Vue Router

Компонент прекрасно интегрируется с маршрутизатором vue-router. Для этого в кнопках можно использовать атрибут to:

<v-bottom-navigation
  v-model="active"
  color="indigo"
>
  <v-btn to="/" value="home" icon>
    <v-icon>mdi-home</v-icon>
  </v-btn>
  <v-btn to="/profile" value="profile" icon>
    <v-icon>mdi-account</v-icon>
  </v-btn>
</v-bottom-navigation>

Это позволяет кнопкам автоматически изменять активное состояние при смене маршрута и обеспечивать навигацию без ручного контроля состояния.

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

Для мобильных приложений часто требуется, чтобы нижняя навигация исчезала при прокрутке контента. В Vuetify это достигается комбинацией v-bottom-navigation и слота v-scroll.

<v-bottom-navigation
  v-model="active"
  hide-on-scroll
>
  <v-btn value="home" icon>
    <v-icon>mdi-home</v-icon>
  </v-btn>
</v-bottom-navigation>

hide-on-scroll автоматически скрывает панель при прокрутке вниз и показывает при прокрутке вверх.

Цветовые схемы и темы

Цвет панели можно задавать как статически через атрибут color, так и динамически через реактивное состояние:

<v-bottom-navigation
  v-model="active"
  :color="isDarkTheme ? 'grey darken-4' : 'blue lighten-2'"
>
  ...
</v-bottom-navigation>

Для кнопок также можно использовать собственные цветовые схемы:

<v-btn value="settings" icon color="red lighten-1">
  <v-icon>mdi-cog</v-icon>
</v-btn>

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

  • Комбинация с v-fab-transition позволяет создавать анимированные кнопки действий поверх панели.
  • Использование слотов prepend и append даёт гибкость для размещения дополнительных элементов, например, индикаторов уведомлений.
  • Поддержка RTL и LTR обеспечивается встроенной в Vuetify логикой, что делает компонент готовым для многоязычных интерфейсов.

Практические рекомендации

  • Всегда задавать уникальные value для кнопок, чтобы корректно работал v-model.
  • Использовать grow для равномерного распределения кнопок на широких экранах.
  • Комбинировать иконки и подписи для повышения удобства использования.
  • При интеграции с vue-router синхронизировать v-model с текущим маршрутом для точного выделения активного элемента.
  • Учитывать адаптивность: на десктопе панель может быть неактуальной, тогда используют условный рендеринг или скрытие через CSS.

Заключение

v-bottom-navigation в Vuetify — универсальный инструмент для реализации нижней навигационной панели, сочетающий адаптивность, интеграцию с маршрутизатором и широкие возможности кастомизации. Правильная настройка v-model, цветов, иконок и поведения на скролле позволяет создавать удобные и современные интерфейсы для мобильных и веб-приложений.

Оглавление