100 lines
3.7 KiB
JSON
100 lines
3.7 KiB
JSON
{
|
||
"slug": "link",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生文字链接：a 标签加类名区分主次，跳转与禁用态都需要自己接管。",
|
||
"usage": [
|
||
"链接本体是原生 <a class=\"kole-link-link\" href=\"#detail\">，href 由使用方给，示例是锚点地址。",
|
||
"次要形态叠加 .kole-link-secondary：class=\"kole-link-link kole-link-secondary\"。",
|
||
"frameworks/Link.html:6 的 <script> 标签之间是空的，没有拦截点击，跳转完全走浏览器默认行为。",
|
||
".kole-link-surface 是浅底容器、.kole-link-desc 是说明文字，都不是链接本体。"
|
||
],
|
||
"bestPractices": [
|
||
"组件不实现 disabled：禁用态只能靠去掉 href 或加 pointer-events，要注意去掉 href 后 <a> 不再可聚焦。",
|
||
"示例 href 是页内锚点，接入外链时要补 rel=\"noopener noreferrer\" 与 target 策略。",
|
||
"没有「已访问」相关样式约定，需要区分状态时自己补类名。"
|
||
],
|
||
"a11y": [
|
||
"<a href> 天然可 Tab 聚焦、可回车触发，无障碍能力来自元素本身。",
|
||
"「查看详情」「下载文件」这类文案独立看没有上下文，同页多个链接时读屏用户无法区分指向。",
|
||
"若做成禁用态（去掉 href），需要补 aria-disabled 说明不可用，否则读屏不会告知。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用原生 <a> 加类名：.kole-link-link 是链接本体、叠加 .kole-link-secondary 表示次样式，其余 -surface / -desc 是外围容器与说明，无脚本无 data-* 钩子。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:5）。"
|
||
},
|
||
{
|
||
"name": "kole-link",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-link-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-link-link",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-link-secondary",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-link-surface",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:6）。"
|
||
},
|
||
{
|
||
"name": "row",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:5）。"
|
||
},
|
||
{
|
||
"name": "sub",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Link.html:5）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Link.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Link.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"link-ex-1",
|
||
"link-ex-2"
|
||
],
|
||
"notes": [
|
||
"两条链接的结构与类名见（frameworks/Link.html:6）。",
|
||
"脚本区为空见（frameworks/Link.html:6）的 <script> 标签对。",
|
||
"跳转未拦截：全页没有任何 addEventListener（frameworks/Link.html:6）。"
|
||
]
|
||
}
|