Tag

Elementlarni belgilash, toifalarga ajratish yoki filtrlash uchun holat nuqtasiga ega kichik yorliq. Har bir tag sukut bo‘yicha yorliq oldida rangli nuqta ko‘rsatadi.

Basic

DefaultPrimarySuccessWarningDangerInfo

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag>Default</VxTag>
  <VxTag type="primary">Primary</VxTag>
  <VxTag type="success">Success</VxTag>
  <VxTag type="warning">Warning</VxTag>
  <VxTag type="danger">Danger</VxTag>
  <VxTag type="info">Info</VxTag>
</template>

Variants

Uchta vizual uslub: soft (sukut bo‘yicha), solid va outline.

SoftDefaultPrimarySuccessWarningDangerInfo

SolidDefaultPrimarySuccessWarningDangerInfo

OutlineDefaultPrimarySuccessWarningDangerInfo

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- Soft (default) — light background, colored text -->
  <VxTag variant="soft" type="primary">Primary</VxTag>

  <!-- Solid — filled background, white text -->
  <VxTag variant="solid" type="primary">Primary</VxTag>

  <!-- Outline — transparent background, colored border -->
  <VxTag variant="outline" type="primary">Primary</VxTag>
</template>

Sizes

sm, md (sukut bo‘yicha) va lg o‘lchamlarda mavjud.

SmallMediumLarge

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag size="sm" type="primary">Small</VxTag>
  <VxTag size="md" type="primary">Medium</VxTag>
  <VxTag size="lg" type="primary">Large</VxTag>
</template>

Rounded

Pill-shaklidagi taglar uchun rounded qo‘shing.

DefaultPrimarySuccessDanger

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag rounded>Default</VxTag>
  <VxTag rounded type="primary">Primary</VxTag>
  <VxTag rounded type="success" variant="solid">Success</VxTag>
  <VxTag rounded type="danger" variant="outline">Danger</VxTag>
</template>

Closable

Yopish tugmasini ko‘rsatish uchun closable ni qo‘shing. Olib tashlashni boshqarish uchun @close ni tinglang.

VueReactAngularSvelte

vue

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

const tags = ref(['Vue', 'React', 'Angular', 'Svelte'])

function removeTag(tag) {
  tags.value = tags.value.filter(t => t !== tag)
}
</script>

<template>
  <VxTag
    v-for="tag in tags"
    :key="tag"
    type="primary"
    closable
    @close="removeTag(tag)"
  >
    {{ tag }}
  </VxTag>
</template>

Checkable

Filtr chiplar kabi taglarni yoqish/o‘chirish. Boshqariladigan holat uchun v-model:checked dan foydalaning.

VueReactAngular Tanlangan: Vue

vue

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

const vue = ref(true)
const react = ref(false)
const angular = ref(false)
</script>

<template>
  <!-- "checkable" makes the tag toggle on click -->
  <!-- Unchecked tags appear muted, checked tags show a checkmark + color -->
  <VxTag type="primary" checkable v-model:checked="vue" rounded>Vue</VxTag>
  <VxTag type="success" checkable v-model:checked="react" rounded>React</VxTag>
  <VxTag type="warning" checkable v-model:checked="angular" rounded>Angular</VxTag>
</template>

Clickable

Hover/faol uslublar va pointer kursori uchun clickable ni qo‘shing. Filtr taglar yoki havolalar uchun foydali.

Filter: ActiveCategoryView all

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "clickable" adds hover/active feedback and pointer cursor -->
  <VxTag type="primary" clickable rounded @click="doSomething">Filter: Active</VxTag>
  <VxTag type="info" variant="solid" clickable rounded>View all</VxTag>
</template>

Avatar

Yorliq oldida kichik rasmni ko‘rsatish uchun avatar prop’idan foydalaning. Foydalanuvchi taglari uchun ajoyib.

Olivia Martin

Jackson Lee

Isabella

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "avatar" shows a small circular image, replacing the dot -->
  <VxTag avatar="https://i.pravatar.cc/40?u=olivia" type="primary" rounded>
    Olivia Martin
  </VxTag>
  <VxTag avatar="/path/to/avatar.jpg" type="success" rounded closable>
    Jackson Lee
  </VxTag>
</template>

Loading

Nuqta o‘rniga aylantirgichni ko‘rsatish uchun loading ni qo‘shing. Yuklanish paytida o‘zaro aloqani o‘chiradi.

DeployingSyncingProcessing

vue

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

const loading = ref(true)
</script>

<template>
  <!-- "loading" replaces the dot with a spinner and disables interaction -->
  <VxTag type="primary" :loading="loading" rounded>Deploying</VxTag>
  <VxTag type="success" loading rounded>Syncing</VxTag>
</template>

Truncate

Uzun matnni uch nuqta bilan qisqartirish uchun max-width ni o‘rnating. To‘liq matnni brauzer tultipi orqali ko‘rish uchun hover qiling.

ShortBu qisqartirilishi kerak bo‘lgan juda uzun tag yorlig‘iBu yerda oshib ketadigan matn

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "max-width" truncates with ellipsis when text overflows -->
  <VxTag type="primary" :max-width="120" rounded>Short</VxTag>
  <VxTag type="success" :max-width="120" rounded>
    This is a very long tag label that should be truncated
  </VxTag>
</template>

Counter

Tag ichida kichik belgi ko‘rsatish uchun count prop’idan foydalaning.

Bugs5Errors99Done3Alert!

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "count" adds a small counter badge inside the tag -->
  <VxTag type="primary" :count="5" rounded>Bugs</VxTag>
  <VxTag type="danger" :count="99" variant="solid" rounded>Errors</VxTag>
  <VxTag type="warning" count="!" rounded>Alert</VxTag>
</template>

Editable

Ikki marta bosish orqali qayta nomlashga ruxsat berish uchun editable ni qo‘shing. Saqlash uchun Enter, bekor qilish uchun Escape tugmasini bosing.

Click meDouble-click to editQayta nomlash uchun tagga ikki marta bosing

vue

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

const tags = ref(['Frontend', 'Backend'])

function onEdit(idx, newValue) {
  tags.value[idx] = newValue
}
</script>

<template>
  <!-- "editable" enables double-click to rename -->
  <!-- @edit fires with the new value when Enter is pressed -->
  <VxTag
    v-for="(tag, idx) in tags"
    :key="idx"
    type="primary"
    editable
    rounded
    @edit="(val) => onEdit(idx, val)"
  >
    {{ tag }}
  </VxTag>
</template>

Animated

Uzluksiz animatsiyalarni qo‘shish uchun effect prop’idan foydalaning.

PulseNuqta halqa bilan pulslaydi — jonli / onlayn holat

BounceButun tag sakraydi — yangi elementlarga e’tiborni jalb qiladi

ShakeGorizontal silkinish — xatolar yoki shoshilinchlik

GlowPulslaydigan box-shadow porlash — urg‘u

WaveYaltiroq harakat — yuklanish yoki ishlov berish

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag type="success" effect="pulse" rounded>Online</VxTag>
  <VxTag type="primary" effect="bounce" rounded>New</VxTag>
  <VxTag type="danger" effect="shake" rounded>Error</VxTag>
  <VxTag type="warning" effect="glow" variant="solid" rounded>Important</VxTag>
  <VxTag type="info" effect="wave" variant="solid" rounded>Loading</VxTag>
</template>

Custom Color

Moslashtirilgan rangni o‘rnatish uchun color prop’idan foydalaning. Barcha variantlar bilan ishlaydi.

VioletPinkCyanOrange

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag color="#8b5cf6">Violet</VxTag>
  <VxTag color="#ec4899" variant="solid">Pink</VxTag>
  <VxTag color="#06b6d4" variant="outline">Cyan</VxTag>
  <VxTag color="#f97316" closable>Orange</VxTag>
</template>

Icon Slot

Standart nuqtani moslashtirilgan belgi bilan almashtirish uchun icon slotidan foydalaning.

Approved Rejected Info

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- The "icon" slot replaces the default dot with a custom icon -->
  <VxTag type="success" variant="solid" rounded>
    <template #icon>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </template>
    Approved
  </VxTag>
</template>

Disabled

O‘zaro aloqani oldini olish uchun disabled ni qo‘shing.

DisabledCan't closeDisabled

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag disabled>Disabled</VxTag>
  <VxTag type="primary" disabled closable>Can't close</VxTag>
  <VxTag type="success" variant="solid" disabled>Disabled</VxTag>
</template>

Foydalanuvchilarga yangi taglarni to‘g‘ridan-to‘g‘ri qo‘shish imkoniyatini berish uchun VxTagGroup ni addable bilan ishlating. + tugmasi kiritish maydoniga aylanadi.

vue

<script setup>
import { ref } from 'vue'
import { VxTag, VxTagGroup } from 'veloxui'

const tags = ref(['Frontend', 'Backend', 'DevOps'])

function onAdd(value) {
  tags.value.push(value)
}

function onRemove(tag) {
  tags.value = tags.value.filter(t => t !== tag)
}
</script>

<template>
  <!-- "addable" shows a + button that becomes an input on click -->
  <!-- @add fires with the new tag text when Enter is pressed -->
  <VxTagGroup addable add-text="Add tag" @add="onAdd" rounded>
    <VxTag
      v-for="tag in tags"
      :key="tag"
      type="primary"
      closable
      @close="onRemove(tag)"
    >
      {{ tag }}
    </VxTag>
  </VxTagGroup>
</template>

Drag & drop orqali qayta tartibni yoqish uchun VxTagGroup ga draggable ni qo‘shing.

vue

<script setup>
import { ref } from 'vue'
import { VxTag, VxTagGroup } from 'veloxui'

const tags = ref(['Design', 'Develop', 'Test', 'Deploy', 'Monitor'])

function onReorder(order) {
  tags.value = order.map(i => tags.value[i])
}
</script>

<template>
  <!-- "draggable" lets users reorder tags by dragging -->
  <!-- @reorder fires with the new index order array -->
  <VxTagGroup draggable @reorder="onReorder" rounded>
    <VxTag v-for="tag in tags" :key="tag" type="info" closable>{{ tag }}</VxTag>
  </VxTagGroup>
</template>

API

VxTag Props

Prop	Type	Default	Description
`type`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Rang turi
`variant`	`'soft' \| 'solid' \| 'outline'`	`'soft'`	Vizual uslub
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tag o‘lchami
`effect`	`'pulse' \| 'bounce' \| 'shake' \| 'glow' \| 'wave'`	—	Animatsiya effekti
`closable`	`boolean`	`false`	Yopish tugmasini ko‘rsatish
`disabled`	`boolean`	`false`	O‘zaro aloqani o‘chirish
`rounded`	`boolean`	`false`	Pill shakli (to‘liq border-radius)
`color`	`string`	—	Moslashtirilgan rang (type’ni bekor qiladi)
`checkable`	`boolean`	`false`	Bosilganda yoqish/o‘chirish
`checked`	`boolean`	—	Belgilangan holat (v-model)
`clickable`	`boolean`	`false`	Hover/faol uslublar + pointer kursori
`loading`	`boolean`	`false`	Aylantirgichni ko‘rsatish, o‘zaro aloqani o‘chirish
`maxWidth`	`string \| number`	—	Uch nuqta bilan qisqartirish
`avatar`	`string`	—	Yorliq oldida ko‘rsatiladigan rasm URL
`count`	`string \| number`	—	Tag ichidagi hisoblagich belgisi
`editable`	`boolean`	`false`	Qayta nomlash uchun ikki marta bosing

VxTag Slots

Slot	Description
`default`	Tag kontenti
`icon`	Standart nuqtani moslashtirilgan belgi bilan almashtiradi

VxTag Events

Event	Payload	Description
`close`	—	Yopish tugmasi bosildi
`click`	`MouseEvent`	Tag bosildi
`update:checked`	`boolean`	Belgilangan holat o‘zgardi (checkable)
`edit`	`string`	Ichki tahrirdan keyingi yangi qiymat

VxTagGroup Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Ichki taglar uchun standart o‘lcham
`type`	`TagType`	—	Ichki taglar uchun standart type
`variant`	`TagVariant`	—	Ichki taglar uchun standart variant
`rounded`	`boolean`	`false`	Ichki taglar uchun standart rounded
`closable`	`boolean`	`false`	Ichki taglar uchun standart closable
`draggable`	`boolean`	`false`	Drag & drop tartibini yoqish
`addable`	`boolean`	`false`	"+ New Tag" qo‘shish tugmasini ko‘rsatish
`addText`	`string`	`'New Tag'`	Qo‘shish maydoni uchun placeholder matni

VxTagGroup Events

Event	Payload	Description
`add`	`string`	Yangi tag matni yuborildi
`reorder`	`number[]`	Indeks massivi sifatida yangi tartib

Tag ​

Basic ​

Variants ​

Sizes ​

Rounded ​

Closable ​

Checkable ​

Clickable ​

Avatar ​

Loading ​

Truncate ​

Counter ​

Editable ​

Animated ​

Custom Color ​

Icon Slot ​

Disabled ​

Tag Group — Addable ​

Tag Group — Draggable ​

API ​

VxTag Props ​

VxTag Slots ​

VxTag Events ​

VxTagGroup Props ​

VxTagGroup Events ​

Tag