Бейджи v-badge

Компонент v-badge предназначен для отображения небольших визуальных индикаторов поверх других элементов интерфейса. Чаще всего бейджи используют для обозначения количества уведомлений, новых сообщений или состояния активности элементов. В Vuetify бейджи интегрируются с другими компонентами, такими как кнопки, аватары или иконки.

<v-badge
  :content="5"
  color="red"
  overlap
>
  <v-icon>mdi-email</v-icon>
</v-badge>
  • content – текст или число, отображаемое на бейдже.
  • color – цвет бейджа (можно использовать встроенные цвета Vuetify или кастомные).
  • overlap – бейдж накладывается поверх элемента, а не размещается рядом.

Настройка положения бейджа

Положение бейджа относительно основного элемента управляется с помощью свойств top, bottom, left, right. Комбинируя их, можно точно расположить индикатор.

<v-badge
  content="3"
  color="green"
  top
  right
>
  <v-btn icon>
    <v-icon>mdi-bell</v-icon>
  </v-btn>
</v-badge>
  • top и bottom управляют вертикальной позицией.
  • left и right управляют горизонтальной позицией.

По умолчанию бейдж располагается в верхнем правом углу элемента.

Использование dot-бейджей

Иногда необходимо отображать небольшой индикатор без текста или числа. Для этого используется модификатор dot. Он показывает лишь маленький цветной кружок, информирующий о событии.

<v-badge
  dot
  color="blue"
  overlap
>
  <v-avatar size="40">
    <img src="avatar.jpg" alt="User" />
  </v-avatar>
</v-badge>
  • dot убирает content и оставляет минимальный визуальный индикатор.
  • overlap рекомендуется использовать с dot, чтобы бейдж накладывался на элемент корректно.

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

В Vuetify v-badge можно анимировать с помощью transition. Это удобно для динамических уведомлений и изменения состояния.

<v-badge
  :content="messages"
  color="orange"
  transition="scale-transition"
>
  <v-icon>mdi-chat</v-icon>
</v-badge>
  • transition принимает стандартные Vuetify-транзишены: scale-transition, fade-transition, slide-y-transition и другие.
  • Динамическое изменение content автоматически активирует анимацию.

Стилизация и кастомизация

Vuetify позволяет полностью кастомизировать бейджи с помощью слотов и CSS. Слот badge используется для полного контроля над содержимым индикатора.

<v-badge overlap>
  <template #badge>
    <span class="custom-badge">NEW</span>
  </template>
  <v-btn icon>
    <v-icon>mdi-star</v-icon>
  </v-btn>
</v-badge>

<style>
.custom-badge {
  background-color: purple;
  color: white;
  font-weight: bold;
  font-size: 12px;
  border-radius: 8px;
  padding: 2px 6px;
}
</style>
  • Слот badge позволяет вставлять любые элементы или текст.
  • Полная свобода для стилизации: размер, цвет, тень, шрифт, границы.

Динамическое обновление

Бейджи часто используют для отображения изменяющихся данных, например, количества непрочитанных сообщений. Связывание с реактивными свойствами Vue обеспечивает автоматическое обновление.

<template>
  <v-badge :content="unreadMessages" color="red">
    <v-icon>mdi-email</v-icon>
  </v-badge>
  <v-btn @click="increment">Добавить сообщение</v-btn>
</template>

<script>
export default {
  data() {
    return {
      unreadMessages: 0
    }
  },
  methods: {
    increment() {
      this.unreadMessages += 1
    }
  }
}
</script>
  • Изменение значения unreadMessages мгновенно отражается на бейдже.
  • Можно использовать любые реактивные источники данных: Vuex, Pinia или props.

Совместимость с другими компонентами

v-badge отлично интегрируется с кнопками (v-btn), иконками (v-icon), аватарами (v-avatar), карточками (v-card) и списками (v-list-item). Это делает его универсальным инструментом для визуального уведомления пользователя.

<v-list-item>
  <v-list-item-avatar>
    <v-badge dot color="red">
      <v-avatar>
        <img src="avatar2.jpg" alt="User"/>
      </v-avatar>
    </v-badge>
  </v-list-item-avatar>
  <v-list-item-content>
    <v-list-item-title>Имя пользователя</v-list-item-title>
  </v-list-item-content>
</v-list-item>
  • Dot-бейдж на аватаре указывает на статус онлайн или новое событие.
  • В списках и таблицах бейджи помогают мгновенно визуализировать статус элементов.

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

  • Использовать overlap с dot и числовыми бейджами для аккуратного наложения на элемент.
  • Комбинировать transition для плавного отображения и скрытия бейджей.
  • Слот badge подходит для кастомных индикаторов с текстом или иконкой.
  • Реактивные свойства делают бейджи динамичными и актуальными без ручного обновления DOM.
  • Контрастные цвета бейджа относительно основного элемента улучшают читаемость и заметность.

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

Оглавление