76 lines
4.7 KiB
JSON
76 lines
4.7 KiB
JSON
{
|
||
"slug": "progressvariants",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "React 端的 ProgressVariants：type 分 line 与环形（circle / dashboard），status 决定颜色，percent 控制填充比例。",
|
||
"usage": [
|
||
"type 走两条渲染分支：line 时返回横条结构，其它值走环形 SVG 分支，且 `const isDash = type === 'dashboard'` 决定缺口弧（frameworks/ProgressVariants.jsx:10,20）。",
|
||
"status 查颜色表：`const color = COLORS[status] || COLORS.normal`，success / warning / error / normal 四色写死在组件常量里（frameworks/ProgressVariants.jsx:6,9）。",
|
||
"line 与环形的类名策略不同：横条无条件拼 `is-${status}`，环形只在非 normal 时追加（`status !== 'normal' ? ' is-' + status : ''`）（frameworks/ProgressVariants.jsx:12,23）。",
|
||
"进度靠内联样式表达：横条写 `style={{ width: percent + '%' }}`，环形用 strokeDashoffset 按 `arcLen * (1 - percent / 100)` 计算（frameworks/ProgressVariants.jsx:14,28）。",
|
||
"showInfo 控制数值文案且两分支文案不同：横条在 success 时显示「完成」否则显示百分比，环形固定显示 `{percent}%`（frameworks/ProgressVariants.jsx:15,31）。",
|
||
"没有回调型 props：组件是纯展示件，进度变化只来自外部传入的 percent（frameworks/ProgressVariants.jsx:8）。"
|
||
],
|
||
"bestPractices": [
|
||
"status 传不认识的值会静默回落到 normal 蓝色，不报错（frameworks/ProgressVariants.jsx:9）。",
|
||
"环形半径与线宽写死在源码（R = 42、strokeWidth=\"8\"），尺寸不能通过 props 调整（frameworks/ProgressVariants.jsx:4,25,27）。",
|
||
"percent 不做 0–100 夹取，传 150 会画出超出范围的角度或宽度（frameworks/ProgressVariants.jsx:14,28）。",
|
||
"success 态在横条里会把文案换成「完成」，想保留数字要传 showInfo={false} 自己补文案（frameworks/ProgressVariants.jsx:15）。"
|
||
],
|
||
"a11y": [
|
||
"组件自身不输出 role=\"progressbar\"，也无 aria-valuenow / aria-valuemin / aria-valuemax，语义完全依赖使用方在标签上传入（frameworks/ProgressVariants.jsx:12,23）。",
|
||
"showInfo 为真时数值以可见文本呈现，读屏器可读；为假时没有任何文本替代（frameworks/ProgressVariants.jsx:15,31）。",
|
||
"环形是 <svg> 绘图，圆环没有 <title>，读屏器不会从中获得进度信息（frameworks/ProgressVariants.jsx:24-30）。",
|
||
"组件内部无可聚焦元素，不打断键盘顺序（frameworks/ProgressVariants.jsx:12-32）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 4 个 props（type / percent / status / showInfo），全部为展示型、没有 onXxx 回调；颜色表与半径是组件内常量，没有 v-model。",
|
||
"table": [
|
||
{
|
||
"name": "percent",
|
||
"type": "Number",
|
||
"desc": "填充比例，横条写 width、环形算 strokeDashoffset（frameworks/ProgressVariants.jsx:14,28）"
|
||
},
|
||
{
|
||
"name": "showInfo",
|
||
"type": "Boolean",
|
||
"desc": "为真才渲染数值文案，横条与环形文案不同（frameworks/ProgressVariants.jsx:15,31）"
|
||
},
|
||
{
|
||
"name": "status",
|
||
"type": "String",
|
||
"desc": "查 COLORS 表取色并参与 is- 类名，未知值回落 normal（frameworks/ProgressVariants.jsx:6,9,12）"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "String",
|
||
"desc": "line 走横条分支、dashboard 走带缺口的环形、其它值走整圆（frameworks/ProgressVariants.jsx:10,20）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ProgressVariants.jsx",
|
||
"kind": "React",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ProgressVariants.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"progressvariants-ex-1",
|
||
"progressvariants-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 解构见 frameworks/ProgressVariants.jsx:8，共 4 个；颜色表见第 6 行，两条渲染分支见第 10 行与第 20-32 行。",
|
||
"percent 的两处消费（width 百分比、strokeDashoffset 计算）见 frameworks/ProgressVariants.jsx:14 与 28 行；showInfo 的两处条件渲染见 15 与 31 行。",
|
||
"实现缺口：无 role/aria 进度语义、无尺寸 prop、percent 不夹取（frameworks/ProgressVariants.jsx:12,23）；按实现写，未补 aria 属性。",
|
||
"a11y 依据：环形 SVG 无 title 见 frameworks/ProgressVariants.jsx:24-30；全文无 role / aria-valuenow。",
|
||
"示例里给组件传的 role=\"progressbar\" 属于透传属性，本实现未声明也未消费该值（frameworks/ProgressVariants.jsx:8）。"
|
||
]
|
||
}
|