Tag

Небольшая метка со статусной точкой для маркировки, категоризации или фильтрации элементов. По умолчанию каждый тег показывает цветную точку перед подписью.

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

Три визуальных стиля: soft (по умолчанию), solid и 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 (по умолчанию) и lg.

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

Добавьте rounded для тегов в форме pill.

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

Добавьте closable, чтобы показать кнопку закрытия. Слушайте @close, чтобы обрабатывать удаление.

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

Переключайте теги вкл/выкл как фильтр-чипы. Используйте v-model:checked для управляемого состояния.

VueReactAngular Выбрано: 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

Добавьте clickable для стилей hover/active и курсора pointer. Полезно для тегов-фильтров или ссылок.

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

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

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

Добавьте loading, чтобы показать спиннер вместо точки. Отключает взаимодействие во время загрузки.

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

Установите max-width, чтобы обрезать длинный текст многоточием. Наведите курсор, чтобы увидеть полный текст в подсказке браузера.

ShortThis is a very long tag label that should be truncatedOverflow text here

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

Используйте проп count, чтобы показать маленький значок внутри тега.

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

Добавьте editable, чтобы разрешить переименование двойным кликом. Нажмите Enter, чтобы сохранить, Escape — чтобы отменить.

Click meDouble-click to editДважды щёлкните по тегу, чтобы переименовать

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

Используйте проп effect, чтобы добавить непрерывные анимации.

PulseТочка пульсирует кольцом — статус live / онлайн

BounceВесь тег подпрыгивает — привлекает внимание к новым элементам

ShakeГоризонтальная тряска — ошибки или срочность

GlowПульсирующее свечение box-shadow — акцент

WaveМерцающая волна — загрузка или обработка

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

Используйте проп color, чтобы задать собственный цвет. Работает со всеми вариантами.

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

Используйте слот icon, чтобы заменить точку по умолчанию пользовательской иконкой.

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

Добавьте disabled, чтобы запретить взаимодействие.

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>

Используйте VxTagGroup с addable, чтобы пользователи могли добавлять новые теги встроенно. Кнопка + превращается в поле ввода.

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>

Добавьте draggable к VxTagGroup, чтобы включить переупорядочивание перетаскиванием.

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'`	Тип цвета
`variant`	`'soft' \| 'solid' \| 'outline'`	`'soft'`	Визуальный стиль
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер тега
`effect`	`'pulse' \| 'bounce' \| 'shake' \| 'glow' \| 'wave'`	—	Эффект анимации
`closable`	`boolean`	`false`	Показать кнопку закрытия
`disabled`	`boolean`	`false`	Отключить взаимодействие
`rounded`	`boolean`	`false`	Форма pill (полный border-radius)
`color`	`string`	—	Пользовательский цвет (переопределяет type)
`checkable`	`boolean`	`false`	Переключение вкл/выкл по клику
`checked`	`boolean`	—	Состояние выбора (v-model)
`clickable`	`boolean`	`false`	Стили hover/active + курсор pointer
`loading`	`boolean`	`false`	Показать спиннер, отключить взаимодействие
`maxWidth`	`string \| number`	—	Обрезка многоточием
`avatar`	`string`	—	URL изображения перед подписью
`count`	`string \| number`	—	Значок-счётчик внутри тега
`editable`	`boolean`	`false`	Двойной клик для переименования

VxTag Slots

Slot	Description
`default`	Содержимое тега
`icon`	Заменяет точку по умолчанию пользовательской иконкой

VxTag Events

Event	Payload	Description
`close`	—	Нажата кнопка закрытия
`click`	`MouseEvent`	Клик по тегу
`update:checked`	`boolean`	Состояние выбора изменено (checkable)
`edit`	`string`	Новое значение после встроенного редактирования

VxTagGroup Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер по умолчанию для дочерних тегов
`type`	`TagType`	—	Тип по умолчанию для дочерних тегов
`variant`	`TagVariant`	—	Вариант по умолчанию для дочерних тегов
`rounded`	`boolean`	`false`	Скруглённость по умолчанию для дочерних тегов
`closable`	`boolean`	`false`	Закрываемость по умолчанию для дочерних тегов
`draggable`	`boolean`	`false`	Включить перетаскивание для изменения порядка
`addable`	`boolean`	`false`	Показать кнопку добавления «+ New Tag»
`addText`	`string`	`'New Tag'`	Подсказка для поля добавления

VxTagGroup Events

Event	Payload	Description
`add`	`string`	Отправлен текст нового тега
`reorder`	`number[]`	Новый порядок в виде массива индексов

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