100 lines
4.0 KiB
JSON
100 lines
4.0 KiB
JSON
{
|
|
"slug": "pageheader",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生页头：header 里三段布局，返回按钮的反馈只是改成 aria-label。",
|
|
"usage": [
|
|
"根是语义标签 <header class=\"kole-pageheader-pageheader\">，三段依次为返回按钮、中间标题块、右侧主操作按钮。",
|
|
"标题块 .kole-pageheader-pageheader-main 里放 <strong class=\"kole-pageheader-title\"> 与 .kole-pageheader-desc 副标题。",
|
|
"返回按钮带 data-back 钩子，脚本做的事却很轻：this.setAttribute(\"aria-label\", \"已返回\") 改文案，不真的导航。",
|
|
"主操作按钮用 .kole-pageheader-button 叠 .kole-pageheader-primary，与返回按钮共用按钮类。"
|
|
],
|
|
"bestPractices": [
|
|
"返回只改 aria-label 是演示，接真实路由时必须替换成 history.back() 或跳转逻辑。",
|
|
"标题用 <strong> 而非 <h1>，页面级标题层级要自己补，否则文档大纲里没有这一级。",
|
|
"两个按钮的 type=\"button\" 要保留，否则放进表单会触发提交。"
|
|
],
|
|
"a11y": [
|
|
"header 语义标签让读屏可定位页头区域，这比 div 好。",
|
|
"返回按钮的内容是「← 返回」，箭头进读屏会念出符号名，可以只用文字加 CSS 画箭头。",
|
|
"标题块不是标题元素，读屏无法按标题跳转定位到「用户详情」。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端用类名加语义标签：<header class=\"kole-pageheader-pageheader\"> 承载页头，-pageheader-main / -title / -desc 组织中间区，-button 与 -primary 是按钮样式，返回行为由 data-back 钩子脚本接管。",
|
|
"table": [
|
|
{
|
|
"name": "demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:5）。"
|
|
},
|
|
{
|
|
"name": "demo-note",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:5）。"
|
|
},
|
|
{
|
|
"name": "kole-pageheader",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-pageheader-button",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-pageheader-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-pageheader-pageheader",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-pageheader-pageheader-main",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-pageheader-primary",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:6）。"
|
|
},
|
|
{
|
|
"name": "kole-pageheader-surface",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/PageHeader.html:6）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/PageHeader.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/PageHeader.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"pageheader-ex-1",
|
|
"pageheader-ex-2"
|
|
],
|
|
"notes": [
|
|
"页头结构与三段布局见（frameworks/PageHeader.html:6），data-back 钩子同在这一行。",
|
|
"返回的反馈逻辑见（frameworks/PageHeader.html:6）的内联脚本（setAttribute(\"aria-label\", \"已返回\")）。",
|
|
"按钮类型 type=\"button\" 见（frameworks/PageHeader.html:6）。"
|
|
]
|
|
}
|