100 lines
5.3 KiB
JSON
100 lines
5.3 KiB
JSON
{
|
||
"slug": "resultvariants",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 resultvariants：.kole-result 是居中结果页，四种 is-* 只染 64px 圆图标底色。",
|
||
"usage": [
|
||
"结果页 .kole-result 是 text-align:center 加 40px 20px 的大内边距，整体居中（frameworks/ResultVariants.css:3）。",
|
||
"圆形图标 .kole-result-icon 是 64px、圆角 50%、居中外边距、32px 字号加反色文字，用于放对勾/叉等单字符号（frameworks/ResultVariants.css:4）。",
|
||
"四种状态只改图标底色：is-success 成功色、is-error 错误色、is-warning 警告色、is-info 品牌色（frameworks/ResultVariants.css:5-8）。",
|
||
"标题 .kole-result-title 是 20px 字重 500 的标题色，说明 .kole-result-desc 是 14px 次级色加重 8px 上边距（frameworks/ResultVariants.css:9-10）。",
|
||
"操作区 .kole-result-actions 上留 24px、横向 8px 间距并居中对齐（frameworks/ResultVariants.css:11）。",
|
||
"按钮 .kole-result-btn 是描边样式，hover 换边框色与品牌字色；主按钮在同类上再加 .primary 切品牌实底反色字，其 hover 换 --kole-color-brand-hover（frameworks/ResultVariants.css:12-15）。",
|
||
"补充信息区用 .kole-result-extra 留 20px 上边距（frameworks/ResultVariants.css:16）。"
|
||
],
|
||
"bestPractices": [
|
||
"主按钮是叠加类写法：在 .kole-result-btn 上再加 .primary，两个类必须同时存在（frameworks/ResultVariants.css:14）。",
|
||
"四种状态的差异只落在图标上，标题与说明的文字色不变；需要整体换色要另外覆盖 title/desc（frameworks/ResultVariants.css:5-8）。",
|
||
"图标是圆形色块加单字符号，符号内容需业务侧填（样式里没有伪元素内容），换符号不需要改样式（frameworks/ResultVariants.css:4）。"
|
||
],
|
||
"a11y": [
|
||
"图标内的符号是纯装饰（圆形加字符），语义须由 .kole-result-title 承担，建议图标置于 aria-hidden（frameworks/ResultVariants.css:4）。",
|
||
"四种状态只有颜色差异，色觉障碍用户无法区分；标题文字必须写明成功/失败/警告（frameworks/ResultVariants.css:5-8）。",
|
||
"结果页的大内边距让内容居中，长文场景注意行长；desc 行高 1.6 已给基本可读性（frameworks/ResultVariants.css:3、10）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-result（页面）、.kole-result-icon（图标）、.kole-result-title / -desc（文案）、.kole-result-actions / -btn / -extra（操作区）；状态 is-success / is-error / is-warning / is-info，主按钮用叠加类 .primary。",
|
||
"table": [
|
||
{
|
||
"name": "kole-result",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-result-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-success",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-warning",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-info",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-result-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-result-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-result-actions",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-result-btn",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ResultVariants.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ResultVariants.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"resultvariants-ex-1",
|
||
"resultvariants-ex-2",
|
||
"resultvariants-ex-3",
|
||
"resultvariants-ex-4"
|
||
],
|
||
"notes": [
|
||
"页与图标见 frameworks/ResultVariants.css:3-4，四态见 frameworks/ResultVariants.css:5-8，文案见 frameworks/ResultVariants.css:9-10，按钮见 frameworks/ResultVariants.css:12-15。",
|
||
"按钮 hover 的边框色 #C9D4F2 是硬编码（frameworks/ResultVariants.css:13）。",
|
||
"示例 ex-1 到 ex-4 依次对应四种状态（site/examples/resultvariants.json），每例的 html 只有 .kole-result 加对应 is-*。"
|
||
]
|
||
}
|