TTag / 标签

Tag for labeling and categorizing content. Supports icons, avatars, status dots, badge counts, closeable, and removable. / 标签用于内容标记和分类，支持图标、头像、状态点、计数徽章、可关闭和移除功能。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
label	string	''	Tag text
color	BaseColor	—	Tag color (bg-* / text-*-fg)
closable	boolean	false	Show close button / 显示关闭按钮
disabled	boolean	false	Disabled
icon	Component	—	Prefix icon component
avatar	string	—	Prefix avatar image URL
status	BaseColor	—	Prefix status dot color
badge	string | number	—	Suffix badge count
removable	boolean	false	Remove button style

Events / 事件

Event	Description / 说明
@close	Fired when close/remove button clicked

Slots / 插槽

Slot	Description / 说明
default	Custom label content / 自定义标签文字

Basic Usage / 基础用法

<script setup lang="ts">
import { TTag, TTagList } from '@gulcc/tabler-vue'
</script>

<template>
  <TTag color="blue">Vue.js</TTag>
  <TTag color="green">React</TTag>
  <TTag color="red">Angular</TTag>

  <!-- Tag list / 标签组 -->
  <TTagList>
    <TTag color="blue">Vue.js</TTag>
    <TTag color="green">React</TTag>
  </TTagList>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TTag } from '@gulcc/tabler-vue'
import { IconStar } from '@tabler/icons-vue'
</script>

<template>
  <!-- With icon / 带图标 -->
  <TTag color="orange" :icon="IconStar">Featured / 精选</TTag>

  <!-- Closeable / 可关闭 -->
  <TTag color="primary" closable @close="handleClose">Remove me / 移除</TTag>

  <!-- With avatar / 带头像 -->
  <TTag color="azure" avatar="/path/to/avatar.jpg">User / 用户</TTag>

  <!-- With status dot / 带状态点 -->
  <TTag color="cyan" status="success">Online / 在线</TTag>

  <!-- With badge count / 带计数 -->
  <TTag color="purple" :badge="5">Notifications / 通知</TTag>

  <!-- Disabled / 禁用 -->
  <TTag color="secondary" disabled>Archived / 已归档</TTag>
</template>

Tips / 避坑指南

• color uses BaseColor (brand colors like blue, green) — not TablerColor (which includes primary, success etc.)
• The @close event fires for both closable and removable modes — handle it to remove the tag from the list
• TTagList wraps tags in a flex container — use it when displaying multiple tags together
• Prefix decorations (icon, avatar, status) are mutually exclusive in terms of visual priority