iter: d20 progress 支持不确定态
This commit is contained in:
@@ -1,18 +1,37 @@
|
||||
import { effect, h } from '@ui-arch/frame';
|
||||
import type { ProgressProps } from './types.js';
|
||||
|
||||
/*** 进度条:轨道 + 渐变流动填充,value 信号驱动 0-100;满格切换 success 色并停止条纹 ***/
|
||||
export function progress(props: ProgressProps): HTMLElement {
|
||||
/*** 进度条:value 信号驱动 0-100 定量态,缺省 value 则退化为不确定态(无限往复);满格切 success 色并停条纹 ***/
|
||||
export function progress(props: ProgressProps = {}): HTMLElement {
|
||||
// —— 状态集中声明 ——
|
||||
const value = props.value; // 可选:不传即不确定态
|
||||
const fill = h('div', { class: 'ua-progress-fill' });
|
||||
const track = h('div', { class: 'ua-progress-track' }, fill);
|
||||
const text = h('span', { class: 'ua-progress-text' });
|
||||
const withText = props.showText !== false && !!value; // 不确定态没有百分比可显示
|
||||
|
||||
if (!value) {
|
||||
fill.classList.add('ua-indeterminate'); // 宽度与往复动画交给 CSS
|
||||
return h('div', { class: 'ua-progress', role: 'progressbar', 'aria-label': '进行中' }, track);
|
||||
}
|
||||
effect(() => {
|
||||
const v = clamp(props.value()); // 依赖收集:信号变化自动写回
|
||||
const v = clamp(value()); // 依赖收集:信号变化自动写回
|
||||
fill.style.width = `${v}%`;
|
||||
fill.classList.toggle('ua-done', v >= 100); // 满格切语义色
|
||||
text.textContent = `${Math.round(v)}%`;
|
||||
});
|
||||
return h('div', { class: 'ua-progress' }, track, props.showText === false ? null : text);
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
class: 'ua-progress',
|
||||
role: 'progressbar',
|
||||
'aria-valuemin': '0',
|
||||
'aria-valuemax': '100',
|
||||
'aria-valuenow': () => String(Math.round(clamp(value()))),
|
||||
},
|
||||
track,
|
||||
withText ? text : null,
|
||||
);
|
||||
}
|
||||
|
||||
/*** 进度钳制到 0-100 ***/
|
||||
|
||||
@@ -213,8 +213,8 @@ export interface SpinnerProps {
|
||||
|
||||
/*** 进度条入参 ***/
|
||||
export interface ProgressProps {
|
||||
value: Signal<number>; // 当前进度 0-100 的信号
|
||||
showText?: boolean; // 是否右侧显示百分比;缺省 true
|
||||
value?: Signal<number>; // 当前进度 0-100 的信号;不传即不确定态(未知时长的加载)
|
||||
showText?: boolean; // 是否右侧显示百分比;缺省 true(不确定态忽略)
|
||||
}
|
||||
|
||||
/*** 标签页入参 ***/
|
||||
|
||||
Reference in New Issue
Block a user