90 lines
3.7 KiB
JSON
90 lines
3.7 KiB
JSON
{
|
|
"slug": "dashboardcard",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生数据卡片：数值与趋势各占一个类名，涨跌只靠 up / down 状态类，全文无脚本。",
|
|
"usage": [
|
|
"卡片本体 .kole-dashcard，头部 .kole-dashcard-head 里放 .kole-dashcard-icon 与 .kole-dashcard-title，数值单独用 .kole-dashcard-value。",
|
|
"涨跌只用 up / down 两个类挂在 .kole-dashcard-trend 上，箭头与颜色都由 CSS 提供，HTML 里不写符号。",
|
|
"没有脚本：改数要直接改 .kole-dashcard-value 的文本，up / down 类也只是静态标记，组件不重算趋势。",
|
|
"卡片之间没有列表容器，示例是并列多个 .kole-dashcard，栅格由外层自己排。"
|
|
],
|
|
"bestPractices": [
|
|
"数值是纯文本，接入时自己格式化（千分位、单位）后再写进 .kole-dashcard-value，组件不做格式化。",
|
|
"up / down 只是颜色与箭头方向，若业务上「涨」是坏事（例如错误率），必须补文案而不只改颜色。",
|
|
"无脚本意味着数据更新要自己换文本，不要指望组件重算趋势。"
|
|
],
|
|
"a11y": [
|
|
"涨跌只靠 up / down 带来的颜色和箭头，没有文字或 aria-label，色觉障碍与读屏用户都拿不到方向。",
|
|
"数值没有 <data> 也没有 aria-label 说明含义，读屏只念一个数字，缺少「环比」这类上下文。",
|
|
".kole-dashcard-icon 若为装饰字符，应加 aria-hidden 免得读屏念出符号。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端纯类名交付：.kole-dashcard 卡片、-head / -icon / -title 头部、-value 数值、-trend 趋势（叠 up / down 状态类），没有脚本也没有 data-* 钩子。",
|
|
"table": [
|
|
{
|
|
"name": "down",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:21）。"
|
|
},
|
|
{
|
|
"name": "kole-dashcard",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:10）。"
|
|
},
|
|
{
|
|
"name": "kole-dashcard-head",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:14）。"
|
|
},
|
|
{
|
|
"name": "kole-dashcard-icon",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:14）。"
|
|
},
|
|
{
|
|
"name": "kole-dashcard-title",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:14）。"
|
|
},
|
|
{
|
|
"name": "kole-dashcard-trend",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:16）。"
|
|
},
|
|
{
|
|
"name": "kole-dashcard-value",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:15）。"
|
|
},
|
|
{
|
|
"name": "up",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/DashboardCard.html:16）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/DashboardCard.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/DashboardCard.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"dashboardcard-ex-1",
|
|
"dashboardcard-ex-2"
|
|
],
|
|
"notes": [
|
|
"卡片结构见（frameworks/DashboardCard.html:10-21）。",
|
|
"趋势状态类 up 见（frameworks/DashboardCard.html:16）、down 见（frameworks/DashboardCard.html:21）。",
|
|
"无脚本：frameworks/DashboardCard.html 全文 25 行不含 <script> 标签。"
|
|
]
|
|
}
|