Badge

Компонент Badge в библиотеке Naive UI служит для отображения небольших индикаторов рядом с другими элементами интерфейса, чаще всего для обозначения количества уведомлений, статуса или дополнительной информации. Badge поддерживает разные стили, размеры и положение относительно элемента, к которому он прикреплён.

import { NBadge, NButton } from 'naive-ui'

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

<template>
  <n-badge count="5">
    <n-button>Сообщения</n-button>
  </n-badge>
</template>

В этом примере на кнопке появляется красный кружок с числом 5, указывающий количество сообщений.

Основные свойства Badge

  • count: число или строка, отображаемое внутри бейджа.
  • max: максимальное число, которое будет показано; если значение превышает max, отображается как max+.
  • dot: если установлено в true, отображается только точка, без числа.
  • type: визуальный стиль бейджа, поддерживает значения: default, primary, success, info, warning, error.
  • show-zero: если true, даже при значении 0 бейдж будет видим.

Пример с dot и type:

<template>
  <n-badge dot type="success">
    <n-button>Онлайн</n-button>
  </n-badge>
</template>

В этом случае отображается маленькая зелёная точка рядом с кнопкой, указывающая на онлайн-статус.

Управление положением Badge

Badge можно смещать относительно родительского элемента с помощью свойства offset. Оно принимает массив из двух чисел [x, y] в пикселях:

<template>
  <n-badge count="12" :offset="[10, -5]">
    <n-button>Уведомления</n-button>
  </n-badge>
</template>

В данном примере бейдж смещается вправо на 10px и вверх на 5px относительно стандартного положения.

Использование Badge без дочернего элемента

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

<template>
  <n-badge count="99+" />
</template>

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

Интерактивные возможности

Badge может сочетаться с другими компонентами Naive UI для интерактивного интерфейса:

  1. С кнопками и иконками – чаще всего используется для уведомлений или статусов.
  2. С аватарами – точка рядом с аватаром обозначает активность пользователя.
  3. С выпадающими списками – можно показывать количество непрочитанных элементов.
<template>
  <n-badge count="3">
    <n-avatar src="avatar.png" />
  </n-badge>
</template>

Настройка стилей

Все визуальные аспекты можно кастомизировать через CSS-переменные Naive UI:

  • --n-badge-color: цвет фона бейджа.
  • --n-badge-text-color: цвет текста внутри.
  • --n-badge-font-size: размер шрифта числа.
  • --n-badge-border-radius: радиус скругления.

Пример изменения цвета и размера:

<template>
  <n-badge count="7" class="custom-badge">
    <n-button>Почта</n-button>
  </n-badge>
</template>

<style>
.custom-badge {
  --n-badge-color: #ff9800;
  --n-badge-text-color: #fff;
  --n-badge-font-size: 12px;
  --n-badge-border-radius: 8px;
}
</style>

Поддержка реактивных данных

Badge легко интегрируется с Vue реактивными переменными:

<template>
  <n-badge :count="notifications">
    <n-button>Сообщения</n-button>
  </n-badge>
  <n-button @click="addNotification">Добавить уведомление</n-button>
</template>

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

const notifications = ref(0)
const addNotification = () => {
  notifications.value += 1
}
</script>

Количество бейджа обновляется динамически при изменении переменной notifications.

Сценарии применения

  • Уведомления – отображение числа непрочитанных сообщений.
  • Статусы объектов – активен/неактивен, онлайн/оффлайн.
  • Индикаторы лимитов – количество товаров в корзине, превышение квоты.
  • Системные предупреждения – ошибки и предупреждения с визуальным акцентом.

Советы по оптимизации

  • Использовать dot для минималистичных индикаторов статуса.
  • Ограничивать max для предотвращения длинных чисел.
  • Применять кастомные стили через CSS-переменные для согласованного дизайна с интерфейсом.
  • Оборачивать бейджи в интерактивные компоненты только при необходимости, чтобы сохранять производительность.

Badge в Naive UI — лёгкий, гибкий и визуально выразительный инструмент для акцентирования внимания на важной информации, с полной поддержкой реактивности и кастомизации.

Оглавление