100 lines
3.9 KiB
JSON
100 lines
3.9 KiB
JSON
{
|
|
"slug": "typography",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生排版：三类类名分管标题、辅助文字与长文省略，整页无脚本。",
|
|
"usage": [
|
|
"三个类名分工固定：.kole-typography-title 是标题级、.kole-typography-desc 是辅助说明、.kole-typography-compact 是长文本省略。",
|
|
"标题类叠在真实标题元素上：<h2 class=\"kole-typography-title\">，语义与样式一起给，不是给 div 加类名模拟。",
|
|
"省略效果由 .kole-typography-compact 承担，文本仍是完整字符串写在 HTML 里（示例「长文本省略示例：订单提交后将进入审核流程……」）。",
|
|
"frameworks/Typography.html:6 的 <script> 标签之间是空的，排版不参与任何交互。"
|
|
],
|
|
"bestPractices": [
|
|
"省略只改视觉效果，文本不截断，取全文走 textContent 不会拿到省略号。",
|
|
"标题类要与 h1 到 h6 的层级匹配使用，光加类名不改元素会让文档大纲缺级。",
|
|
"数字排版没有单独类名，等宽或对齐需求要自己补样式。"
|
|
],
|
|
"a11y": [
|
|
"标题用真实 <h2> 加类名，读屏可按标题跳转，这比 div 加字号样式可靠。",
|
|
"省略文本没有 title 或 aria-label 提供完整内容，读屏虽能读全文，但鼠标用户看不到全貌。",
|
|
"辅助文字（.kole-typography-desc）只有更浅的颜色，需要确认对比度达到 4.5:1。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端是纯类名：.kole-typography 容器、-title 标题级、-desc 辅助说明、-compact 长文省略、-surface 内容容器，无脚本、无 data-* 钩子。",
|
|
"table": [
|
|
{
|
|
"name": "demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-note",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:5）。"
|
|
},
|
|
{
|
|
"name": "kole-typography",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-typography-compact",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-typography-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-typography-surface",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-typography-title",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:6）。"
|
|
},
|
|
{
|
|
"name": "row",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:5）。"
|
|
},
|
|
{
|
|
"name": "sub",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/Typography.html:5）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Typography.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/Typography.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"typography-ex-1",
|
|
"typography-ex-2"
|
|
],
|
|
"notes": [
|
|
"三类类名与标题元素见（frameworks/Typography.html:6）。",
|
|
"脚本区为空见（frameworks/Typography.html:6）的 <script> 标签对。",
|
|
"样式依据：.kole-typography-title 在 frameworks/Typography.css:5、.kole-typography-compact 在 frameworks/Typography.css:12。"
|
|
]
|
|
}
|