头像与身份标记
Avatar
为用户或实体提供快速识别的视觉入口。
林周+2
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'avatar'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
多人协作、消息作者和账号入口。
什么时候不用
只有装饰用途时，不要让读屏重复读出相邻名字。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "用户头像" |
items | [{"label":"林"},{"label":"周"},{"label":"+2"}] |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 有相邻姓名时图片可用空替代文本。
- 交互式头像使用真实按钮或链接。
和相似组件的区别
Avatar 识别实体；Badge 表达状态或数量。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验