80 lines
3.6 KiB
JSON
80 lines
3.6 KiB
JSON
{
|
||
"slug": "card",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "卡片容器样式：kole-card 打底，bordered/shadowed 变体类加 __header/__body/__actions 区块类。",
|
||
"usage": [
|
||
"块级结构用双下划线命名：.kole-card__header 放标题与 .kole-card__extra 操作区，.kole-card__body 放内容，.kole-card__actions 放底部按钮。",
|
||
"变体是独立的修饰类：.kole-card--bordered 只有边框，.kole-card--shadowed 带阴影，两者可以同时加在 .kole-card 上。",
|
||
"标题字号与颜色由 .kole-card__title 给出，右侧操作区 .kole-card__extra 用 flex 推右。",
|
||
"容器底色与描边可换成 --kole-color-card-bg 与 --kole-color-border，品牌强调色用 --kole-color-brand。"
|
||
],
|
||
"bestPractices": [
|
||
"变体类不要互相替代：需要边框加阴影时两个类都要写，不存在合并变体。",
|
||
"区块类必须挂在 .kole-card 内部，脱离根元素的 __body 没有选择器作用域外的补偿样式。",
|
||
"卡片不自带内边距，页面级留白由宿主容器控制，避免在卡片里再套一层 padding 造成双倍间距。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-card",
|
||
"type": "基础类",
|
||
"desc": "卡片根：圆角、底色、内边距与纵向布局（frameworks/Card.css:2）"
|
||
},
|
||
{
|
||
"name": "kole-card--bordered",
|
||
"type": "变体类",
|
||
"desc": "描边变体：加 1px 边框（frameworks/Card.css:6）"
|
||
},
|
||
{
|
||
"name": "kole-card--shadowed",
|
||
"type": "变体类",
|
||
"desc": "阴影变体：加低阴影（frameworks/Card.css:7）"
|
||
},
|
||
{
|
||
"name": "kole-card__header",
|
||
"type": "结构类",
|
||
"desc": "头部：标题与右侧 extra 的横向布局（frameworks/Card.css:8）"
|
||
},
|
||
{
|
||
"name": "kole-card__body",
|
||
"type": "结构类",
|
||
"desc": "内容区（frameworks/Card.css:14）"
|
||
},
|
||
{
|
||
"name": "kole-card__actions",
|
||
"type": "结构类",
|
||
"desc": "底部操作区，按钮右对齐（frameworks/Card.css:15）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"卡片通常是区块容器，建议宿主用 section 或 article 承载，标题层级用真实标题标签而非只靠 .kole-card__title 的字号。",
|
||
"仅靠--shadowed 表达层次在深色主题下对比不足，同时保留边框或提高描边色更稳妥。",
|
||
":focus-visible 不在卡片作用域内，卡片内的可聚焦控件需要宿主样式或复用按钮类。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Card.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Card.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"card-ex-1",
|
||
"card-ex-2",
|
||
"card-ex-3"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Card.css:2 定义 .kole-card",
|
||
"依据 frameworks/Card.css:6 定义 .kole-card--bordered",
|
||
"依据 frameworks/Card.css:7 定义 .kole-card--shadowed",
|
||
"依据 frameworks/Card.css:8 定义 .kole-card__header",
|
||
"依据 frameworks/Card.css:14 定义 .kole-card__body",
|
||
"依据 frameworks/Card.css:15 定义 .kole-card__actions",
|
||
"类名总表来自 frameworks/Card.css（facts.consumedApi.classes，10 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|