100 lines
4.0 KiB
JSON
100 lines
4.0 KiB
JSON
{
|
||
"slug": "divider",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生分割线：水平用 hr 元素，垂直态叠 is-vertical 并补 role=\"separator\" 语义。",
|
||
"usage": [
|
||
"水平线是原生 <hr class=\"kole-divider-divider\">，语义由元素本身提供，不必再补 role。",
|
||
"垂直线复用同一个类并叠 is-vertical：class=\"kole-divider-divider is-vertical\"，同时补 role=\"separator\" 与 aria-label=\"分隔\"。",
|
||
"带文字的分隔是把 .kole-divider-desc 放在 <hr> 前后，靠顺序排版，不是 ::before 伪元素。",
|
||
"frameworks/Divider.html:6 的 <script> 标签之间是空的，分割线没有任何行为。"
|
||
],
|
||
"bestPractices": [
|
||
"垂直态是 div 加类名模拟的，它没有 hr 的原生语义，必须保留 role=\"separator\"，漏掉就只剩一条视觉线。",
|
||
"两段文字中间夹 <hr> 的写法会打断阅读节奏，具体间距靠 Divider.css，不要用多余的空段落调。",
|
||
"外层还包了一层 div 控制宽度（示例是 width:100% 的行内样式），改布局时注意这层不是分割线本体。"
|
||
],
|
||
"a11y": [
|
||
"水平线用 <hr> 自带 separator 语义，读屏能识别为分隔，这是正确用法。",
|
||
"垂直态补了 role=\"separator\" 与 aria-label=\"分隔\"，弥补了 div 无语义的问题。",
|
||
"aria-label=\"分隔\" 文案偏空，若分隔两侧主题不同（如「基本信息 / 安全设置」）宜写具体些。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端的载体是元素加类名：水平态用 <hr class=\"kole-divider-divider\"> 借原生语义，垂直态是同一类叠 is-vertical 再加 role=\"separator\"，文字分隔靠 .kole-divider-desc 前后排布。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:5）。"
|
||
},
|
||
{
|
||
"name": "is-vertical",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-divider",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-divider-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-divider-divider",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-divider-surface",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:6）。"
|
||
},
|
||
{
|
||
"name": "row",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:5）。"
|
||
},
|
||
{
|
||
"name": "sub",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Divider.html:5）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Divider.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Divider.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"divider-ex-1",
|
||
"divider-ex-2"
|
||
],
|
||
"notes": [
|
||
"水平与垂直两种写法见（frameworks/Divider.html:6），role 与 aria-label 同在这一行。",
|
||
"脚本区为空见（frameworks/Divider.html:6）的 <script> 标签对。",
|
||
"样式依据：.kole-divider-divider 在 frameworks/Divider.css:64、.is-vertical 在 frameworks/Divider.css:65。"
|
||
]
|
||
}
|