QBadge бейджи

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

Основной синтаксис QBadge

Компонент QBadge может использоваться как самостоятельный элемент или оборачивать другой компонент:

<q-badge label="5" color="primary" />

Параметры:

  • label — текст или число, отображаемое внутри бейджа. Может быть строкой или числом.
  • color — цвет бейджа. Поддерживаются стандартные цвета Quasar (primary, secondary, accent, positive, negative, warning, info и пользовательские цвета через CSS).
  • text-color — цвет текста внутри бейджа.
  • align — позиционирование бейджа относительно родительского элемента (top-right, top-left, bottom-right, bottom-left).
  • floating — делает бейдж плавающим, поверх родительского компонента.
  • outline — отображение бейджа с рамкой и прозрачным фоном.
  • transparent — делает фон бейджа прозрачным.

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

<q-btn color="primary" label="Сообщения">
  <q-badge color="red" floating label="7" align="top-right" />
</q-btn>

В этом примере QBadge визуально располагается в верхнем правом углу кнопки и показывает количество сообщений.

Позиционирование бейджей

QBadge позволяет гибко управлять положением относительно родительского компонента. Используются свойства align и floating.

Примеры:

<q-icon name="notifications">
  <q-badge color="red" floating label="3" align="top-right" />
</q-icon>

<q-icon name="mail">
  <q-badge color="green" floating label="!" align="bottom-left" />
</q-icon>
  • top-right — верхний правый угол
  • top-left — верхний левый угол
  • bottom-right — нижний правый угол
  • bottom-left — нижний левый угол

Использование floating позволяет бейджу не занимать отдельное место в потоке документа, а накладываться поверх родителя.

Варианты оформления бейджей

Цвет и текст:

<q-badge color="positive" text-color="white" label="Success" />
<q-badge color="negative" text-color="white" label="Error" />
<q-badge color="warning" text-color="black" label="Warning" />

Outline и прозрачный фон:

<q-badge outline color="primary" label="Outline" />
<q-badge transparent color="secondary" label="Transparent" />

Размеры бейджей задаются через CSS-классы или встроенные стили. Например:

<q-badge label="99+" class="q-ma-xs" style="font-size: 14px; padding: 2px 6px;" />

Бейджи с динамическими значениями

QBadge можно использовать для отображения динамических числовых данных, например, количества уведомлений:

<template>
  <q-btn color="primary" label="Уведомления">
    <q-badge
      color="red"
      floating
      :label="notificationsCount"
      align="top-right"
    />
  </q-btn>
</template>

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

const notificationsCount = ref(0)

// Симуляция поступления уведомлений
setInterval(() => {
  notificationsCount.value = Math.floor(Math.random() * 10)
}, 2000)
</script>

В этом примере значение бейджа автоматически обновляется каждые 2 секунды, демонстрируя реактивность Vue и Quasar.

Использование с иконками и списками

Иконки:

<q-icon name="shopping_cart">
  <q-badge color="red" floating label="12" align="top-right" />
</q-icon>

Списки:

<q-list bordered padding>
  <q-item clickable v-for="item in items" :key="item.name">
    <q-item-section>{{ item.name }}</q-item-section>
    <q-item-section side>
      <q-badge :label="item.count" color="secondary" />
    </q-item-section>
  </q-item>
</q-list>

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

QBadge можно кастомизировать через CSS-классы и переменные Quasar. Например, изменение радиуса и теней:

<q-badge
  label="New"
  color="accent"
  class="my-badge"
/>

<style scoped>
.my-badge {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-weight: bold;
}
</style>

Интеграция с другими компонентами Quasar

С карточками QCard:

<q-card style="width: 200px">
  <q-card-section>
    Заголовок карточки
    <q-badge color="positive" floating label="!" align="top-right" />
  </q-card-section>
  <q-card-actions>
    <q-btn flat label="Действие" />
  </q-card-actions>
</q-card>

С вкладками QTab:

<q-tabs v-model="tab" dense>
  <q-tab name="inbox" label="Inbox">
    <q-badge color="red" floating label="5" align="top-right" />
  </q-tab>
  <q-tab name="sent" label="Sent" />
</q-tabs>

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

Анимации и взаимодействие

Хотя QBadge не имеет встроенных анимаций, их можно добавлять через CSS переходы и классы Quasar:

<q-badge
  label="New"
  color="accent"
  class="q-transition-scale"
/>

Класс q-transition-scale обеспечивает плавное появление и исчезновение бейджа при изменении видимости.

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

Оглавление