101 lines
4.0 KiB
JSON
101 lines
4.0 KiB
JSON
{
|
|
"slug": "badge",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生 Badge：宿主外挂数字角标或小红点，数字与语义分别由文本和 aria-label 承担。",
|
|
"usage": [
|
|
"宿主节点是 .kole-badge-badge-host，先放被标注内容（示例用 .kole-badge-surface 撑出「消息」「状态」），再放角标。",
|
|
"数字角标用 .kole-badge-badge，同时写 aria-label=\"8 条未读\"，避免读屏只念一个数字。",
|
|
"纯存在性提示用小圆点 .kole-badge-dot，它是空元素，语义完全落在 aria-label=\"异常\" 上。",
|
|
"frameworks/Badge.html:6 的脚本是空的，角标数字不参与任何脚本更新，改数只能改 HTML 文本。",
|
|
".kole-badge 只是外层行容器，角标定位相对的是 .kole-badge-badge-host。"
|
|
],
|
|
"bestPractices": [
|
|
"角标定位依赖宿主作参照：换宿主元素时要确认它带相对定位，否则 .kole-badge-badge 会飘到页角。",
|
|
"数字更新没有脚本示例，接入时要自己写，并同步改 aria-label（数字改了它不会跟着变）。",
|
|
"用 dot 表示「有异常」时不能只靠颜色，aria-label 是唯一的语义出口，必须写。"
|
|
],
|
|
"a11y": [
|
|
"aria-label（「8 条未读」）比裸数字可读，这是本页唯一的状态语义来源。",
|
|
"没有 aria-live，用脚本把数字从 8 改成 9 时读屏不会主动播报。",
|
|
".kole-badge-dot 除颜色外没有文字，色觉障碍用户无法区分状态，需要配合文字或图标。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端的 API 就是类名：.kole-badge-badge-host 宿主、.kole-badge-badge 数字角标、.kole-badge-dot 圆点，状态语义不进类名而进 aria-label，页面无脚本。",
|
|
"table": [
|
|
{
|
|
"name": "demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-note",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:5）。"
|
|
},
|
|
{
|
|
"name": "kole-badge",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-badge-badge",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-badge-badge-host",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-badge-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-badge-dot",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-badge-surface",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:6）。"
|
|
},
|
|
{
|
|
"name": "row",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Badge.html:5）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Badge.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/Badge.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"badge-ex-1",
|
|
"badge-ex-2"
|
|
],
|
|
"notes": [
|
|
"宿主与角标结构见（frameworks/Badge.html:6）。",
|
|
"脚本区为空见（frameworks/Badge.html:6）的 <script> 标签对。",
|
|
"样式依据：.kole-badge-badge-host 在 frameworks/Badge.css:38、.kole-badge-badge 在 frameworks/Badge.css:39、.kole-badge-dot 在 frameworks/Badge.css:42。"
|
|
]
|
|
}
|