Badge 徽标

出现在图标或文字右上角的数字或状态标记。

基本用法

通过 count 设置显示的数字。

⁵¹⁵⁹⁹⁺

<ABadge :count="5">
  <ABtn size="sm">消息</ABtn>
</ABadge>
<ABadge :count="15">
  <ABtn size="sm">评论</ABtn>
</ABadge>
<ABadge :count="100">
  <ABtn size="sm">通知</ABtn>
</ABadge>

小红点

设置 dot 仅显示小红点，不显示数字。

<ABadge dot>
  <ABtn size="sm">消息</ABtn>
</ABadge>

处理中

设置 processing 显示脉冲动画。

<ABadge processing>
  <ABtn size="sm">处理中</ABtn>
</ABadge>

自定义颜色

通过 color 设置徽标颜色。

⁸³

<ABadge :count="8" color="#22c55e">
  <ABtn size="sm">通过</ABtn>
</ABadge>

API

Props

名称	类型	默认值	说明
count	number	—	显示的数字
max	number	99	最大值，超过显示 N+
dot	boolean	false	是否为小红点
offset	[number, number]	—	偏移量 [水平, 垂直]
color	string	—	自定义颜色
showZero	boolean	false	count 为 0 时是否显示
processing	boolean	false	是否显示处理中脉冲动画

交互特性

• 数字变化时 spring 弹性过渡
• hover 时徽标轻微放大
• processing 模式显示脉冲扩散动画