101 lines
4.1 KiB
JSON
101 lines
4.1 KiB
JSON
{
|
|
"slug": "avatar",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生 Avatar：类名拼出头像与状态点，离线态只靠 is-offline 叠加类，整页无脚本。",
|
|
"usage": [
|
|
"头像本体是 .kole-avatar-avatar，示例直接写文字（林 / 陈），.kole-avatar-item 是「头像 + 状态点」的组合壳。",
|
|
"状态点 .kole-avatar-status 是空元素，颜色由类决定，语义只能靠 aria-label=\"在线\" 承载。",
|
|
"离线态是叠加类：class=\"kole-avatar-avatar kole-avatar-avatar is-offline\"，靠 .is-offline 改外观。",
|
|
"frameworks/Avatar.html:6 的 <script> 标签之间是空的，头像没有任何交互，纯结构与类名。",
|
|
".kole-avatar-surface 是自定义内容容器、.kole-avatar-desc 是说明文字，二者都不是头像本体。"
|
|
],
|
|
"bestPractices": [
|
|
"示例里 kole-avatar-avatar 被重复写了两次，是无害冗余，接自己代码时保留一次即可，样式不依赖重复。",
|
|
"状态语义只在 aria-label 上：换状态要同时改类和 aria-label，否则读屏说的还是「在线」。",
|
|
"图片头像没有示例，若换成 <img> 记得补 alt，文字头像的等价物就是 aria-label。"
|
|
],
|
|
"a11y": [
|
|
"文字头像加了 aria-label=\"林工\"，读屏读人名而不是「林」这个字，这个写法要保留。",
|
|
"状态点只有 aria-label=\"在线\"，状态会变时必须同步更新该属性，仅靠颜色变化读屏不可见。",
|
|
"头像不是控件，示例没有 tabindex；若把 .kole-avatar-item 做成可点击，必须换成 button 或补键盘处理。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端没有 props：结构由 .kole-avatar-avatar / .kole-avatar-status / .kole-avatar-item 类名拼出，在线离线只用 .is-offline 状态类，无脚本、无 data-* 钩子。",
|
|
"table": [
|
|
{
|
|
"name": "demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-note",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:5）。"
|
|
},
|
|
{
|
|
"name": "is-offline",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-avatar",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-avatar-avatar",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-avatar-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-avatar-item",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-avatar-status",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-avatar-surface",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Avatar.html:6）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Avatar.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/Avatar.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"avatar-ex-1",
|
|
"avatar-ex-2"
|
|
],
|
|
"notes": [
|
|
"头像与状态点结构见（frameworks/Avatar.html:6），is-offline 叠加也在这一行。",
|
|
"脚本区为空：frameworks/Avatar.html:6 的 <script> 标签对之间没有语句。",
|
|
"样式依据：.kole-avatar-avatar 在 frameworks/Avatar.css:43、.is-offline 在 frameworks/Avatar.css:45、.kole-avatar-status 在 frameworks/Avatar.css:46。"
|
|
]
|
|
}
|