87 lines
3.5 KiB
JSON
87 lines
3.5 KiB
JSON
{
|
||
"slug": "card",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 卡片：.kole-card 容器加 BEM 结构类，边框/阴影与内边距分别由修饰类和内联 style 表达。",
|
||
"usage": [
|
||
"结构类固定四段：.kole-card__header 里的 __title 与 __extra、__body、__actions，不用的段落直接删掉。",
|
||
"边框与阴影是两个修饰类 .kole-card--bordered / .kole-card--shadowed，可同时加，加哪个就出哪种视觉。",
|
||
"内边距示例用 style=\"padding:16px\" 直接写在根节点上，取值 16px 或 24px 两档。",
|
||
"右上角操作放 <div class=\"kole-card__extra\" role=\"button\" tabindex=\"0\">，本端不提供点击行为，需要交互就自己挂脚本。"
|
||
],
|
||
"bestPractices": [
|
||
"删段落时不要只清内容：留空的 .kole-card__header 会带来多余的上下间距，整段一起删。",
|
||
".kole-card 的 padding 示例走内联 style 而不是类名，批量换主题时用 CSS 变量或覆盖内联值，别逐个组件改。",
|
||
".kole-card__extra 上的 role=\"button\" 只是声明语义，实现里没有键盘事件；真要当按钮用请换成原生 <button> 并保留视觉类。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是 .kole-card 加 BEM 结构类与两个修饰类；样式属性（如内边距）直接用内联 style 表达。",
|
||
"table": [
|
||
{
|
||
"name": "kole-card",
|
||
"type": "基础类名",
|
||
"desc": "卡片容器：圆角、背景与裁切"
|
||
},
|
||
{
|
||
"name": "kole-card--bordered",
|
||
"type": "修饰类名",
|
||
"desc": "1px 边框版本，用于轻量内容承载"
|
||
},
|
||
{
|
||
"name": "kole-card--shadowed",
|
||
"type": "修饰类名",
|
||
"desc": "低阴影版本，用于突出展示"
|
||
},
|
||
{
|
||
"name": "kole-card__header",
|
||
"type": "结构类名",
|
||
"desc": "标题区容器，内部放 __title 与 __extra"
|
||
},
|
||
{
|
||
"name": "kole-card__title",
|
||
"type": "结构类名",
|
||
"desc": "标题文本节点"
|
||
},
|
||
{
|
||
"name": "kole-card__extra",
|
||
"type": "结构类名",
|
||
"desc": "标题右侧操作区"
|
||
},
|
||
{
|
||
"name": "kole-card__body",
|
||
"type": "结构类名",
|
||
"desc": "内容区容器"
|
||
},
|
||
{
|
||
"name": "kole-card__actions",
|
||
"type": "结构类名",
|
||
"desc": "底部操作区容器"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"卡片是纯 div 结构，没有 role 或可访问名；作为页面地标请自行补 role=\"region\" 与 aria-label。",
|
||
"标题是普通 div 而非标题元素，需要文档大纲时请在 .kole-card__title 内部使用 h2/h3。",
|
||
".kole-card__extra 在示例里写了 role=\"button\" 与 tabindex=\"0\"，但实现没有键盘触发逻辑，Enter/空格不会响应。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Card.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Card.html —— 纯 H5 演示页：边框/阴影/带标题与操作区三组结构示例，页面不含脚本（纯结构与样式）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"card-ex-1",
|
||
"card-ex-2",
|
||
"card-ex-3"
|
||
],
|
||
"notes": [
|
||
"阴影修饰类的示例结构见（frameworks/Card.html:20）",
|
||
"右上角操作区的语义标注见（frameworks/Card.html:50）",
|
||
"内容区结构类的用法见（frameworks/Card.html:27）",
|
||
"卡片样式与 .kole-card__* 结构类定义在页内 style 块，见（frameworks/Card.html:8）"
|
||
]
|
||
}
|