96 lines
4.1 KiB
JSON
96 lines
4.1 KiB
JSON
{
|
|
"slug": "progressvariants",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生进度变体：线形用内联宽度，环形用 SVG 描边偏移，状态走 is-* 类。",
|
|
"usage": [
|
|
"线形进度是两层：.kole-progress-line-wrap 里放 .kole-progress-line 与 .kole-progress-line-fill，填充宽度用内联 style 百分比。",
|
|
"环形由 circle() 函数生成：圆周长 C = 2 * Math.PI * 42，用 stroke-dashoffset 表示进度（C * (1 - percent / 100)）。",
|
|
"状态色不靠 CSS 变量而写在脚本里：颜色表按 success / warning / error / normal 取色，同时拼 is-<status> 类。",
|
|
"环形内部叠一个 .kole-progress-circle-text 显示百分比文本。",
|
|
"示例只初始化两个环：#c1 传 72 与 normal、#c2 传 88 与 success。"
|
|
],
|
|
"bestPractices": [
|
|
"环形半径 42 与圆周常量绑死，改半径必须同步改 circle() 里的 stroke-dashoffset 基数。",
|
|
"颜色表是脚本内硬编码的十六进制，主题切换不会跟着变，需要接入令牌时自己替换成 var(--kole-*)。",
|
|
"示例传的 percent 没有范围校验，超 100 会得到负 offset。"
|
|
],
|
|
"a11y": [
|
|
"根元素有 role=\"progressbar\" 但缺 aria-valuenow / aria-valuemin / aria-valuemax，读屏读不出进度值。",
|
|
"环形文本只是 span，没有与 progressbar 建立关联。",
|
|
"状态只靠颜色区分（成功绿、警告黄、错误红），色觉障碍用户拿不到区别。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端是类名加内联/脚本算出的样式：.kole-progress-line 与 -line-fill 用内联宽度表示线形进度，.kole-progress-circle 叠 is-<status> 并由页内 circle() 写 stroke-dashoffset，文本走 .kole-progress-circle-text。",
|
|
"table": [
|
|
{
|
|
"name": "is-success",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:14）。"
|
|
},
|
|
{
|
|
"name": "kole-card",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:10）。"
|
|
},
|
|
{
|
|
"name": "kole-progress",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:14）。"
|
|
},
|
|
{
|
|
"name": "kole-progress-circle",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:29）。"
|
|
},
|
|
{
|
|
"name": "kole-progress-circle-text",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:42）。"
|
|
},
|
|
{
|
|
"name": "kole-progress-line",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:15）。"
|
|
},
|
|
{
|
|
"name": "kole-progress-line-fill",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:16）。"
|
|
},
|
|
{
|
|
"name": "kole-progress-line-wrap",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:15）。"
|
|
},
|
|
{
|
|
"name": "kole-progress-text",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ProgressVariants.html:17）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/ProgressVariants.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/ProgressVariants.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"progressvariants-ex-1",
|
|
"progressvariants-ex-2"
|
|
],
|
|
"notes": [
|
|
"线形两层结构见（frameworks/ProgressVariants.html:15-17）。",
|
|
"圆周常量与 offset 计算见（frameworks/ProgressVariants.html:34）与（frameworks/ProgressVariants.html:41）。",
|
|
"状态色表与 is-<status> 拼装见（frameworks/ProgressVariants.html:36-37），两个初始化调用见（frameworks/ProgressVariants.html:44-45）。"
|
|
]
|
|
}
|