Бейдж

Числовая или статусная метка в углу значка или кнопки. Поддерживает цветовые типы, усечение max, красную точку, показ/скрытие нулевого значения и смещение позиции.

Бейдж

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge :value="12" type="primary">
        <LhButton>Непрочитанные</LhButton>
      </LhBadge>
      <LhBadge :value="999" :max="99">
        <LhButton>Усечение по max</LhButton>
      </LhBadge>
      <LhBadge is-dot>
        <LhButton>Режим красной точки</LhButton>
      </LhBadge>
      <LhBadge :value="0" :show-zero="true">
        <LhButton>showZero</LhButton>
      </LhBadge>
      <LhBadge :value="0">
        <LhButton>Ноль скрыт по умолчанию</LhButton>
      </LhBadge>
      <LhBadge :value="3" type="danger" size="small">
        <LhButton>Размер small</LhButton>
      </LhBadge>
    </div>
    <p class="demo-note">offset для точной позиции / hidden — скрытие / content — свой текст</p>
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge content="Горячее" type="danger" :offset="[6, 4]">
        <LhButton>Смещение offset</LhButton>
      </LhBadge>
      <LhBadge :value="5" :hidden="hidden">
        <LhButton>Переключатель hidden</LhButton>
      </LhBadge>
      <LhButton size="small" @click="hidden = !hidden">{{ hidden ? 'Показать бейдж' : 'Скрыть бейдж' }}</LhButton>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    hidden: false,
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
type	Цветовой тип	'primary' \| 'success' \| 'warning' \| 'danger'	'danger'
value	Числовое значение бейджа (при превышении max усекается до max+)	string \| number	—
size	Размер	'small' \| 'default' \| 'large'	'default'
max	Верхний предел значения	number	—
isDot	Режим красной точки (игнорирует value)	boolean	false
hidden	Скрыть бейдж	boolean	false
offset	Смещение относительно позиции по умолчанию [x, y]	[number, number]	—
showZero	Показывать ли бейдж при value=0	boolean	false
content	Пользовательский текст (перекрывает value)	string	—
sx	Сокращённая запись разметки через sx	—	—

Slots

Слот по умолчанию: элемент-хозяин, к которому крепится бейдж.