91 lines
4.7 KiB
JSON
91 lines
4.7 KiB
JSON
{
|
||
"slug": "cardlist",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 cardlist：.kole-cardlist 是卡片网格，.kole-card-cover/-body/-title 拼出单卡三个分区。",
|
||
"usage": [
|
||
"列表容器 .kole-cardlist 是 display:grid 加 16px 间距；列数由业务侧写 grid-template-columns，样式文件里没有列数变体（frameworks/CardList.css:3）。",
|
||
"卡片本体 .kole-cardlist-item：1px 边框、8px 圆角、overflow:hidden 让封面被圆角裁切（frameworks/CardList.css:4）。",
|
||
"hover 只改两处：投影加深到 0 4px 12px 并换边框色（frameworks/CardList.css:5）。",
|
||
"内容分区靠四个类拼：封面 .kole-card-cover（120px 高、品牌浅底、内容居中）、正文 .kole-card-body、标题 .kole-card-title、说明 .kole-card-desc（frameworks/CardList.css:6-9）。",
|
||
"标签区 .kole-card-tags 横向可换行，单枚标签 .kole-card-tag 用品牌浅底加品牌字色（frameworks/CardList.css:10-11）。",
|
||
"底部操作条 .kole-card-actions 有上边框，内部 button 被去掉边框与底色，hover 才出现品牌浅底（frameworks/CardList.css:12-14）。"
|
||
],
|
||
"bestPractices": [
|
||
"列数是内联样式而非类名：改布局要在容器上写 style 或用外层网格，改 .kole-cardlist 的 gap 只影响间距（frameworks/CardList.css:3）。",
|
||
"hover 的边框色 #C9D4F2 是硬编码、不走令牌，主题切到深色时这条会显得突兀，需要时在业务侧覆盖（frameworks/CardList.css:5）。",
|
||
"卡片圆角裁切依赖 .kole-cardlist-item 的 overflow:hidden；封面若自带圆角需求会被这层截断（frameworks/CardList.css:4）。"
|
||
],
|
||
"a11y": [
|
||
"整卡若可点击，建议把可交互元素放在标题链接或按钮上而不是卡片 div，样式层只提供 hover 反馈（frameworks/CardList.css:5）。",
|
||
"封面 .kole-card-cover 是 120px 装饰区，若无信息内容应标记为装饰，避免读屏读出空节点（frameworks/CardList.css:6）。",
|
||
"操作条里的 button 默认无边框无底色，只有文字色，需确认点击目标够大且与背景对比达标（frameworks/CardList.css:13）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-cardlist（网格容器）、.kole-cardlist-item（卡片）与内层 .kole-card-cover / -body / -title / -desc / -tags / -tag / -actions 分区类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-cardlist",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-cardlist-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-cover",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-body",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-tags",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-tag",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-actions",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CardList.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/CardList.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"cardlist-ex-1"
|
||
],
|
||
"notes": [
|
||
"容器见 frameworks/CardList.css:3，卡片见 frameworks/CardList.css:4-5，分区类见 frameworks/CardList.css:6-14。",
|
||
"该文件根类前缀是 kole-card-*（与 BankCardInput 的 kole-card-* 同名不同文件），同页同时引入两者时注意类名冲突。",
|
||
"该文件没有 is-* 状态类，唯一交互反馈是 :hover（frameworks/CardList.css:5、14）。"
|
||
]
|
||
}
|