Badge

Sanoq, nuqta yoki holatni ko'rsatish uchun kontent atrofida o'ralgan suzuvchi badge indikatori.

¹²

³

¹

²

¹

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

<template>
  <VxBadge :value="12">
    <button>izohlar</button>
  </VxBadge>
  <VxBadge :value="3">
    <button>javoblar</button>
  </VxBadge>
  <VxBadge :value="1" type="primary">
    <button>xabarlar</button>
  </VxBadge>
</template>

Max Value

Sanoq max dan oshganida max+ sifatida ko'rsatiladi. Standart max — 99.

⁸

⁹⁹⁺

⁹⁹⁹⁺

<template>
  <VxBadge :value="8" :max="10">
    <button>izohlar</button>
  </VxBadge>
  <VxBadge :value="100" :max="99">
    <button>javoblar</button>
  </VxBadge>
  <VxBadge :value="1000" :max="999">
    <button>bildirishnomalar</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>Siyoh</button>
  </VxBadge>
</template>

Dot

Raqam o'rniga kichik nuqta indikatorini ko'rsating.

<template>
  <VxBadge dot>
    <button>xabarlar</button>
  </VxBadge>
  <VxBadge dot type="success">
    <button>holat</button>
  </VxBadge>
</template>

Text Value

Raqamli bo'lmagan badge lar uchun satr qiymatlaridan foydalaning.

^yangi

^qaynoq

<template>
  <VxBadge value="yangi" type="success">
    <button>Xususiyatlar</button>
  </VxBadge>
  <VxBadge value="qaynoq" color="#ef4444">
    <button>Takliflar</button>
  </VxBadge>
</template>

Offset

Badge pozitsiyasini offset ni [top, right] piksellarda sozlang.

⁸

⁸

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

Show Zero

Standart bo'yicha 0 qiymati badge ni yashiradi. Uni ko'rsatish uchun show-zero dan foydalaning.

⁰

<template>
  <VxBadge :value="0">
    <button>Yashirilgan</button>       <!-- badge yashirilgan -->
  </VxBadge>
  <VxBadge :value="0" show-zero>
    <button>Ko'rsatilgan</button>       <!-- "0" ko'rsatiladi -->
  </VxBadge>
</template>

Hidden

Badge ni dinamik ravishda yashirish/ko'rsatish.

¹²

soni: 12

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

const count = ref(12)
</script>

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

Standalone

Slot kontentisiz badge inline sifatida renderlanadi.

⁵

⁴²

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

Props

Prop	Type	Default	Description
value	string | number	—	Badge kontenti (raqam yoki matn)
max	number	99	max+ ni ko'rsatishdan oldingi maksimal raqam
dot	boolean	false	Raqam o'rniga nuqtani ko'rsatish
hidden	boolean	false	Badge ni yashirish
type	'danger' | 'primary' | 'success' | 'warning' | 'info'	'danger'	Rang to'plami
color	string	''	Maxsus fon rangi
offset	[number, number]	—	Pozitsiya offseti [top, right] piksellarda
showZero	boolean	false	Qiymat 0 bo'lganida badge ni ko'rsatish

Slots

Slot	Description
default	O'raladigan kontent (button, icon, avatar va boshqalar)