77 lines
4.2 KiB
JSON
77 lines
4.2 KiB
JSON
{
|
||
"slug": "dashboardcard",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 dashboardcard：.kole-dashcard 是指标卡，.kole-dashcard-value 放大数字，趋势用 .up/.down 两色。",
|
||
"usage": [
|
||
"卡片 .kole-dashcard 自带卡片底、1px 边框与内边距，是指标卡唯一的容器层（frameworks/DashboardCard.css:3）。",
|
||
"头部 .kole-dashcard-head 用 space-between 把标题与图标分列两端（frameworks/DashboardCard.css:4）。",
|
||
"标题 .kole-dashcard-title 是 13px 次级文字色，刻意弱于数值（frameworks/DashboardCard.css:5）。",
|
||
"图标 .kole-dashcard-icon 是 32px 圆角方块加品牌浅底，只做点缀不承载文本（frameworks/DashboardCard.css:6）。",
|
||
"主数值 .kole-dashcard-value 是 28px、字重 600、标题色，全卡视觉重心（frameworks/DashboardCard.css:7）。",
|
||
"趋势行 .kole-dashcard-trend 是 12px，靠 .up 变成功色、.down 变成错误色，两个类都是独立类名不带 is- 前缀（frameworks/DashboardCard.css:8-10）。"
|
||
],
|
||
"bestPractices": [
|
||
"涨跌只有颜色差异且不带箭头符号，设计上需要箭头时得在业务侧补内容，样式文件没有该伪元素（frameworks/DashboardCard.css:9-10）。",
|
||
"字号阶梯是刻意拉开的（标题 13px / 趋势 12px / 数值 28px），改数值字号会直接破坏主次关系（frameworks/DashboardCard.css:5-7）。",
|
||
"该文件共 8 条规则、没有 is-* 状态类，也不含任何交互伪类；卡片本身不可点（frameworks/DashboardCard.css:3-10）。"
|
||
],
|
||
"a11y": [
|
||
"涨跌是纯颜色表达，色觉障碍用户无法区分；请在文本里带上加/减号或写“上升/下降”（frameworks/DashboardCard.css:9-10）。",
|
||
"图标是 32px 装饰块，若内无文字应标为装饰，避免读屏读出空节点（frameworks/DashboardCard.css:6）。",
|
||
"数值与标题字号差异大但都走文本令牌，深色主题下对比由 --kole-color-text-title 保证（frameworks/DashboardCard.css:7）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-dashcard（卡）加 .kole-dashcard-head / -title / -icon / -value / -trend 五个分区类，趋势方向用 .up / .down 两个变体类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-dashcard",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DashboardCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-dashcard-head",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DashboardCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-dashcard-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DashboardCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-dashcard-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DashboardCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-dashcard-value",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DashboardCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-dashcard-trend",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DashboardCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DashboardCard.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"dashboardcard-ex-1",
|
||
"dashboardcard-ex-2"
|
||
],
|
||
"notes": [
|
||
"卡片见 frameworks/DashboardCard.css:3，头部与标题见 frameworks/DashboardCard.css:4-5，图标见 frameworks/DashboardCard.css:6，数值见 frameworks/DashboardCard.css:7，趋势见 frameworks/DashboardCard.css:8-10。",
|
||
"趋势类 .up / .down 不带 is- 前缀（frameworks/DashboardCard.css:9-10），与同项目其他组件用 .is-* 的惯例不同。",
|
||
"示例 ex-1 与 ex-2 分别只演示 .up 与 .down 两种趋势（site/examples/dashboardcard.json）。"
|
||
]
|
||
}
|