Badge

Плавающий индикатор-бейдж, который оборачивает контент и отображает количество, точки или статус.

¹²

³

¹

²

¹

<script setup lang="ts">
import { VxBadge } from 'veloxui'
</script>

<template>
  <VxBadge :value="12">
    <button>comments</button>
  </VxBadge>
  <VxBadge :value="3">
    <button>replies</button>
  </VxBadge>
  <VxBadge :value="1" type="primary">
    <button>messages</button>
  </VxBadge>
</template>

Max Value

Когда значение превышает max, отображается как max+. По умолчанию max равен 99.

⁸

⁹⁹⁺

⁹⁹⁹⁺

<template>
  <VxBadge :value="8" :max="10">
    <button>comments</button>
  </VxBadge>
  <VxBadge :value="100" :max="99">
    <button>replies</button>
  </VxBadge>
  <VxBadge :value="1000" :max="999">
    <button>notifications</button>
  </VxBadge>
</template>

Types

⁵

⁵

⁵

⁵

⁵

<template>
  <VxBadge :value="5" type="danger">...</VxBadge>
  <VxBadge :value="5" type="primary">...</VxBadge>
  <VxBadge :value="5" type="success">...</VxBadge>
  <VxBadge :value="5" type="warning">...</VxBadge>
  <VxBadge :value="5" type="info">...</VxBadge>
</template>

Custom Color

¹

²

³

<template>
  <VxBadge :value="1" color="#8b5cf6">
    <button>Purple</button>
  </VxBadge>
</template>

Dot

Показывайте небольшой индикатор-точку вместо числа.

<template>
  <VxBadge dot>
    <button>messages</button>
  </VxBadge>
  <VxBadge dot type="success">
    <button>status</button>
  </VxBadge>
</template>

Text Value

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

^new

^hot

<template>
  <VxBadge value="new" type="success">
    <button>Features</button>
  </VxBadge>
  <VxBadge value="hot" color="#ef4444">
    <button>Deals</button>
  </VxBadge>
</template>

Offset

Регулируйте позицию бейджа через offset в формате [top, right] в пикселях.

⁸

⁸

<template>
  <VxBadge :value="8" :offset="[5, 5]">
    <button>Adjusted</button>
  </VxBadge>
</template>

Show Zero

По умолчанию значение 0 скрывает бейдж. Используйте show-zero, чтобы показать его.

⁰

<template>
  <VxBadge :value="0">
    <button>Hidden</button>         <!-- badge hidden -->
  </VxBadge>
  <VxBadge :value="0" show-zero>
    <button>Shown</button>          <!-- shows "0" -->
  </VxBadge>
</template>

Hidden

Динамически скрывайте/показывайте бейдж.

¹²

count: 12

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(12)
</script>

<template>
  <VxBadge :value="count" :hidden="count === 0">
    <button>notifications</button>
  </VxBadge>
  <button @click="count++">+</button>
  <button @click="count = Math.max(0, count - 1)">-</button>
</template>

Standalone

Без содержимого slot бейдж рендерится inline.

⁵

⁴²

<template>
  <VxBadge :value="5" />
  <VxBadge :value="42" type="primary" />
  <VxBadge dot type="success" />
</template>

Props

Prop	Type	Default	Description
value	string | number	—	Содержимое бейджа (число или текст)
max	number	99	Максимум, после которого показывается max+
dot	boolean	false	Показывать точку вместо числа
hidden	boolean	false	Скрыть бейдж
type	'danger' | 'primary' | 'success' | 'warning' | 'info'	'danger'	Цветовой пресет
color	string	''	Произвольный цвет фона
offset	[number, number]	—	Смещение позиции [top, right] в пикселях
showZero	boolean	false	Показывать бейдж при значении 0

Slots

Slot	Description
default	Оборачиваемое содержимое (кнопка, иконка, аватар и т. д.)