100 lines
4.3 KiB
JSON
100 lines
4.3 KiB
JSON
{
|
|
"slug": "cardlist",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生卡片列表：列数写进内联 gridTemplateColumns，操作按钮用 data-title 指回所属卡片。",
|
|
"usage": [
|
|
"列数是内联样式：render() 读 #cols 的 value 后写 root.style.gridTemplateColumns = \"repeat(N, 1fr)\"，默认选中 3 列。",
|
|
"一张卡片由 .kole-cardlist-item 包 .kole-card-cover（示例放 emoji）、.kole-card-body（内含 .kole-card-title 与 .kole-card-desc）组成。",
|
|
"标签区是 .kole-card-tags 里若干 .kole-card-tag，操作区是 .kole-card-actions 里若干原生 <button>，两者都按数据有无决定渲不渲染。",
|
|
"操作按钮带 data-title=\"卡片标题\"，点击处理用 alert(btn.dataset.title + \" · \" + btn.textContent) 定位是哪张卡片的哪个动作。",
|
|
"列数变更靠 #cols 的 change 事件重跑 render()，是整体重渲染而不是切换网格类。"
|
|
],
|
|
"bestPractices": [
|
|
"示例一次性渲染 6 条，接真实数据时翻页或加载更多要自己加。",
|
|
"data-title 作回调上下文，标题重复时会撞车，换成 id 更稳。",
|
|
"gridTemplateColumns 是一整个内联样式赋值，若后续还要写别的内联样式记得合并而不是整串覆盖。"
|
|
],
|
|
"a11y": [
|
|
"卡片之间没有列表语义（既不是 ul/li 也没有 role=\"list\"），读屏不会报「共 N 项」。",
|
|
"操作按钮是原生 button 可键盘触发，但「配置」「查看」这类文案在不同卡片里重复，读屏连读时无法区分属于哪张卡。",
|
|
"封面是 emoji 文本，读屏会念出 emoji 名称，装饰性封面宜加 aria-hidden 或换成带 alt 的图片。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端的契约是类名组合加内联网格：.kole-cardlist 容器（列数写在 style.gridTemplateColumns）、.kole-cardlist-item 卡片、.kole-card-* 各部件，操作按钮用 data-title 携带卡片上下文。",
|
|
"table": [
|
|
{
|
|
"name": "kole-card-actions",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:57）。"
|
|
},
|
|
{
|
|
"name": "kole-card-body",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:52）。"
|
|
},
|
|
{
|
|
"name": "kole-card-cover",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:51）。"
|
|
},
|
|
{
|
|
"name": "kole-card-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:54）。"
|
|
},
|
|
{
|
|
"name": "kole-card-tag",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:44）。"
|
|
},
|
|
{
|
|
"name": "kole-card-tags",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:55）。"
|
|
},
|
|
{
|
|
"name": "kole-card-title",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:53）。"
|
|
},
|
|
{
|
|
"name": "kole-cardlist",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:26）。"
|
|
},
|
|
{
|
|
"name": "kole-cardlist-item",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:50）。"
|
|
},
|
|
{
|
|
"name": "kole-demo-toolbar",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/CardList.html:11）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/CardList.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/CardList.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"cardlist-ex-1"
|
|
],
|
|
"notes": [
|
|
"列数控件与默认值见（frameworks/CardList.html:19-21），网格写入见（frameworks/CardList.html:41）。",
|
|
"卡片结构拼装见（frameworks/CardList.html:50-58），操作按钮 data-title 见（frameworks/CardList.html:47）。",
|
|
"事件绑定见（frameworks/CardList.html:61）与列数变更见（frameworks/CardList.html:68）。"
|
|
]
|
|
}
|