徽标与计数
Badge / Status Badge
在对象旁压缩表达状态、类别或未读数量。
已核验
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'badge'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
需要快速扫描少量补充信息。
什么时候不用
关键决策不能只依赖一个没有说明的颜色标记。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "已核验" |
variant | "soft" |
count | null |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 状态要有文本，避免只靠色彩。
- 数量变化谨慎播报，不逐次打断。
和相似组件的区别
Badge 作为附属信息；Tag Input 是可编辑的多值输入。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验