@xwink/ui

Progress

进度,条或环。value 取 0–1,不给是不定态(数不出进度:条来回扫、环一直转)。行为层是 Reka UI 的 Progress(role="progressbar"、aria-valuenow、不定态)。

颜色跟 currentColor,用 text-* 定色调,轨道自动取它的淡色;环的大小是 1em,跟字号走,放在文字行里与图标同大。

读屏名字走 label:Reka 缺省拿百分比当名字,「导出」这类名字就被顶掉了;进度本身由 aria-valuenow 报,想换说法(「3/10」)给 value-text。

条

确定进度 / 不定态
30%

不给 value 是不定态:数不出进度时来回扫。

环

环可以同时转:弧长是进度,转速(period,转一圈的秒数)是另一路信号,比如区分作业的推进节奏。thickness 是线宽,单位是环直径的 1/16。减弱动态效果时环与扫光放慢而不是停住:停住的读不出「还在进行」。

环
上传 3/5
准备中(不定态,一直转)
导出 40%(全速)
导出 40%(让路)

API

Props

名称类型默认值说明
valuenumber | undefinedundefined0–1;不给是不定态(数不出进度:条来回扫、环一直转)
shape"bar" | "ring" | undefined"bar"—
labelstring | undefinedundefined读屏名字(「导出」);进度本身由 aria-valuenow 报
valueTextstring | undefinedundefined读屏读的进度说法(「3/10」),缺省读百分比
thicknessnumber | undefined2环的线宽,单位是环直径的 1/16
periodnumber | undefinedundefined环转一圈的秒数;不给时确定进度的环不转、不定态 1 秒一圈