标签

Tag 用于标记、分类或显示状态。 TechUI 的标签组件内置了灵活的色调系统 (Tone System)，能够适应从高亮强调到低调辅助的各种 UI 场景。

基础用法

最基础的标签用法，通过 type 属性控制语义颜色。默认为 base 色调。

<template>
  <div class="demo-gap">
    <TuiTag>Default</TuiTag>
    <TuiTag type="primary">Primary</TuiTag>
    <TuiTag type="success">Success</TuiTag>
    <TuiTag type="warning">Warning</TuiTag>
    <TuiTag type="danger">Danger</TuiTag>
    <TuiTag type="info">Info</TuiTag>
    <TuiTag type="invert">Invert</TuiTag>
  </div>
</template>

视觉色调

TuiTag 提供了三种预设的视觉强度，通过 tone 属性控制，以适应不同的信息层级。

基础色调 (Base)

默认值。 平衡的视觉风格，通常表现为淡色背景搭配深色文字，或描边风格。适合常规信息展示。

<TuiTag type="primary" tone="base">Base</TuiTag>

强色调 (Strong)

高饱和度。 采用实色背景（Solid Color）和反白文字。视觉冲击力强，适合强调重要状态或需要引起注意的标记。

<template>
  <TuiTag type="primary" tone="strong">Primary</TuiTag>
  <TuiTag type="success" tone="strong">Success</TuiTag>
  <TuiTag type="danger" tone="strong">Danger</TuiTag>
</template>

弱色调 (Weak)

低饱和度/幽灵风格。 背景极其清淡或透明，仅保留文字颜色。适合在信息密集的列表中使用，避免喧宾夺主。

<template>
  <TuiTag type="primary" tone="weak">Primary</TuiTag>
  <TuiTag type="warning" tone="weak">Warning</TuiTag>
</template>

形状与尺寸

圆角 (Round)

设置 round 属性可将标签变为胶囊形状。

<TuiTag type="primary" round>Round Tag</TuiTag>

尺寸 (Size)

支持 large, default, small 三种尺寸。

<template>
  <TuiTag size="small">Small</TuiTag>
  <TuiTag size="default">Default</TuiTag>
  <TuiTag size="large">Large</TuiTag>
</template>

自定义颜色

当内置的主题色无法满足需求时，可以通过 customColor 属性传入任意 CSS 颜色值。 组件会自动计算该颜色的深浅变体，以适配 strong 或 weak 模式。

<template>
  <TuiTag :customColor="'#722ed1'">Purple</TuiTag>
  
  <TuiTag :customColor="'#ff00ff'" tone="strong">Magenta Strong</TuiTag>
</template>

API 参考

Props

属性名	类型	默认值	说明
type	String	'default'	语义类型。可选：default, invert, primary, success, warning, danger, info, emphasis。
tone	String	'base'	视觉色调。可选：base (标准), strong (强/实色), weak (弱/淡色)。
size	String	'default'	尺寸。可选：default, small, large。
round	Boolean	false	是否为全圆角（胶囊状）。
customColor	String/Array	null	自定义颜色。支持 CSS 颜色字符串，组件会自动生成对应的背景色和文字色。

Slots

插槽名	说明
default	标签的文本内容。