iter(g284): 新增 progressRing 环形进度组件
This commit is contained in:
+43
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-26T15:08:10.710Z",
|
||||
"generatedAt": "2026-10-26T15:11:40.469Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -228,7 +228,8 @@
|
||||
"loading(props, ...children):区域加载遮罩,内容原地降透明度 + 转圈文案,带延迟出场避免快请求闪烁",
|
||||
"relativeTime(props):把时间戳渲染成「3 分钟前」并自动刷新,超阈值改显示绝对日期,title 恒给精确值",
|
||||
"sparkline(props):迷你趋势线,把数值序列压成折线(可填充 + 末点标记),无坐标轴无交互",
|
||||
"heatmap(props):日历热力图,按周列 × 星期行铺格子、四档浓度表示当天数量,悬停看明细"
|
||||
"heatmap(props):日历热力图,按周列 × 星期行铺格子、四档浓度表示当天数量,悬停看明细",
|
||||
"progressRing(props):环形进度,SVG 双圆靠 dasharray 画弧 + 中心百分比,value 可传信号自动重绘"
|
||||
],
|
||||
"keyTypes": [
|
||||
"ButtonProps",
|
||||
@@ -4539,6 +4540,46 @@
|
||||
"格子颜色是相对深浅:按序列最大值归一成四档——所以它说的是「哪天更密」,不是绝对值高低",
|
||||
"默认 12 周、11px 格子;嵌进窄卡片就调小 weeks,看不出格子边界就调大 cellSize"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "progressRing",
|
||||
"title": "环形进度 ProgressRing",
|
||||
"demo": "sec-ring",
|
||||
"props": [
|
||||
{
|
||||
"n": "value",
|
||||
"t": "number | Signal<number>",
|
||||
"d": "当前进度 0-100;超出范围自动夹取,信号变化时自动重绘"
|
||||
},
|
||||
{
|
||||
"n": "size",
|
||||
"t": "number",
|
||||
"d": "外径(px);缺省 96"
|
||||
},
|
||||
{
|
||||
"n": "thickness",
|
||||
"t": "number",
|
||||
"d": "环宽(px);缺省 8"
|
||||
},
|
||||
{
|
||||
"n": "showText",
|
||||
"t": "boolean",
|
||||
"d": "是否显示中心文字;缺省 true(关掉时请自行保证 aria 可读)"
|
||||
},
|
||||
{
|
||||
"n": "label",
|
||||
"t": "string",
|
||||
"d": "中心文字;缺省「N%」"
|
||||
}
|
||||
],
|
||||
"example": "progressRing({ value: pct, size: 96 })",
|
||||
"steps": [
|
||||
"value 给数字就是静态环,给信号就是活环:不用自己算弧长,组件按 0-100 换算 dasharray",
|
||||
"0 点固定在 12 点方向顺时针走,和进度条的心理模型一致,不需要额外传旋转参数",
|
||||
"要放进表格或卡片角落就用 size: 56 + showText: false 的小环,文字由附近的主体数字承担",
|
||||
"换色在父级设 color:进度弧读 currentColor,底环固定描边色(--ua-color-border),不引入第二个色源",
|
||||
"这是个「环形进度条」,不是仪表盘:只表达 0-100 单一进度,多段占比请用饼图类组件"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user