内容 · 14 / 21
Badges st-badges
徽标：无 value 时是小圆点，有数字时封顶显示 max+，非数字字符串原样展示。默认插槽放被标记的元素，徽标钉在其右上角且不拦截点击。
基础：圆点、数字与文字
不写 value 是 6px 圆点；写数字会显示为胶囊数字；写非数字字符串则原样展示，不参与 max 封顶。
LIVE
value示例代码
<!-- 无 value：小圆点 -->
<st-badges>
<st-icon-button title="通知"><iconify-icon icon="mdi:bell-outline"></iconify-icon></st-icon-button>
</st-badges>
<!-- 数字；超过 max 显示 99+ -->
<st-badges value="12">
<st-icon-button title="消息"><iconify-icon icon="mdi:email-outline"></iconify-icon></st-icon-button>
</st-badges>
<!-- 非数字：原样展示 -->
<st-badges value="NEW" color="success">
<st-button variant="outlined">新版</st-button>
</st-badges>用在按钮与图标按钮上
默认插槽可以是任意元素。按钮上的徽标常用于表达待处理数量，图标按钮上的徽标用于未读提醒。
LIVE
button / icon-button示例代码
<st-badges value="3">
<st-button>收件箱</st-button>
</st-badges>
<st-badges value="9">
<st-icon-button variant="filled" title="通知"><iconify-icon icon="mdi:bell-outline"></iconify-icon></st-icon-button>
</st-badges>
<!-- 圆点：只提醒“有新内容” -->
<st-badges>
<st-icon-button variant="outlined" title="待处理">📋</st-icon-button>
</st-badges>color 语义换色
color 接受 M3 角色名或 color 工具里的自定义变量名，底色与文字自动配对。默认是 error 红，成功、提示、次要状态改用对应角色。
LIVE
color示例代码
<st-badges value="5" color="primary">...</st-badges>
<st-badges value="5" color="success">...</st-badges>
<st-badges value="5" color="tertiary">...</st-badges>
<st-badges value="5">...</st-badges> <!-- 默认 error -->max 封顶
max 只对数字生效，默认 99。达到上限后显示 max+，避免过宽的数字撑破布局；非数字字符串不封顶。
LIVE
max示例代码
<st-badges value="12" max="9">...</st-badges> <!-- 9+ -->
<st-badges value="120">...</st-badges> <!-- 99+ -->
<st-badges value="1200" max="999">...</st-badges> <!-- 999+ -->动态更新 value
ofa 页面用 attr:value 绑定 data 数字；数据变化时徽标立即更新，不需要手动操作 DOM。徽标本身 pointer-events: none，不会挡住底下按钮的点击。
LIVE
attr:value示例代码（attr:value）
<st-badges attr:value="count" max="99">
<st-icon-button title="实时消息">📡</st-icon-button>
</st-badges>
<script>
export default async () => ({
data: { count: 7 },
proto: {
inc() {
this.count += 1;
},
},
});
</script>列表、标题与任意元素
徽标可以贴在任何 inline-flex 宿主上：列表项前缀图标、标题文字、头像等。字号随宿主 font-size 等比缩放，位置固定在右上角。
LIVE
list / heading / avatar示例代码（列表与头像）
<st-list>
<st-list-item button>
<st-badges slot="prefix" value="12"><iconify-icon icon="mdi:inbox-arrow-down"></iconify-icon></st-badges>
收件箱<span slot="suffix">刚刚</span>
</st-list-item>
</st-list>
<!-- 标题 -->
<st-badges value="12" color="primary">
<strong>消息中心</strong>
</st-badges>
<!-- 任意元素：头像上的圆点 -->
<st-badges>
<span style="display: inline-block; width: 40px; height: 40px; border-radius: 50%;"></span>
</st-badges>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
value | number | string | 无 | 数字封顶显示；非数字原样展示；缺省为圆点 |
max | number | 99 | 数字封顶，超出显示 max+ |
color | M3 角色名 / 自定义变量名 | error | 徽标底色与文字色自动配对 |
插槽 / 事件 / 注意
- 插槽：默认插槽放被标记元素（按钮 / 图标按钮 / 头像 / 文字均可）。
- 无事件；徽标
pointer-events: none，不挡点击。 - 动态更新：ofa 页面用
attr:value；JS 场景用 ofa 实例的attr("value", n)。 - 徽标固定在宿主右上角外偏
0.214em；圆点贴角。 - 尺寸随宿主
font-size等比缩放。