Tuff
|Docs
组件/Badge 徽标

Badge 徽标

紧凑的计数、状态或圆点标记

已验证自 0.3.4

用法

变体

示例加载中...

弹出动效

切换 open 时徽标滑入或弹出，关闭后保留占位；数字只滚动改变的位。

示例加载中...

自定义插槽内容

<template>
  <TxBadge variant="primary">
    <strong>Beta</strong>
  </TxBadge>
</template>

自定义颜色

<template>
  <TxBadge value="Internal" color="#111827" />
</template>

圆点提示

<template>
  <TxFlex align="center" gap="8px">
    <TxBadge dot variant="error" />
    <span>服务降级</span>
  </TxFlex>
</template>

最佳实践

  • 计数与简短状态用 TxBadge；需要状态图标或权限映射时用 TxStatusBadge。
  • 文本保持简短，徽标不换行。
  • 角标由宿主定位；open 绑定未读状态，不要另加 transform。
  • 关键状态不要只靠圆点颜色，旁边配文字。
  • 语义状态用 variant，color 只用于品牌色或自定义分类。

API 参考

属性

属性名类型默认值说明
variant'default' | 'primary' | 'success' | 'warning' | 'error''default'语义配色。
valuenumber | string0无插槽且非 dot 时的文本；数字按位滚动。
colorstring-自定义背景色，文字随之变白。
dotbooleanfalse渲染圆点，不显示文本。
openbooleantrue显隐；切换时播放动效，关闭后保留占位。

插槽

插槽名Props说明
default-自定义内容，优先于 value；dot 时忽略。

CSS 变量

变量来源说明
--tx-badge-bgvariant / color背景色。
--tx-badge-textvariant / color文字色。
--tx-badge-bordervariant边框色。
--tx-badge-dotcolordot 圆点的填充色，未设置时用文字色。
--tx-badge-offset-x / --tx-badge-offset-y调用方滑入起点偏移，默认 -8.2px / 12.4px。
--tx-badge-slide-dur调用方滑入时长，默认 260ms。
--tx-badge-pop-dur / --tx-badge-pop-close-dur调用方弹出 / 收起时长，默认 500ms / 180ms。
--tx-badge-fade-dur / --tx-badge-fade-close-dur调用方淡入 / 淡出时长，默认 400ms / 180ms。
--tx-badge-blur调用方收起态的模糊量，默认 2px。
--tx-badge-slide-ease / --tx-badge-pop-ease / --tx-badge-close-ease调用方三段动效的缓动。

概述

  • 根节点是内联的 pill span。
  • dot 时只渲染 .tx-badge__dot；否则默认插槽优先于 value。
  • value 默认为 0：不传插槽也不开 dot 时显示 0。
  • 数字 value 按位值滚动（9 → 10 是长出一位，而非整体替换）；字符串与插槽原样渲染。
  • open 的动效只在切换时播放，首次挂载不播放；减少动态效果时停用，数字直接写入新值。
  • 没有点击事件、定位、溢出截断或锚定逻辑；交互绑定在外层控件上。

技术实现

  • 数字经 TxTextMorph 渲染，徽标宽度跟随它的容器动画，不另行测量。
  • 源码：packages/tuffex/packages/components/src/badge/。
查看源码
packages/tuffex/packages/components/src/badge/index.ts