示例
直接操作示例，查看组件在具体任务中的状态与反馈。
执行中
上传组件快照38%
校验公开路由与机器可读文档17 / 24
边界状态
等待开始0%
发布完成100%
自定义格式
文件上传3 / 8 个
资料同步64% 已同步
少量步骤
配置50%
批量任务
导入记录175 / 250
本地导入
导入完成度25%
使用建议
用于可计算的任务
只有当前值与总量可靠时使用 Progress；未知时长任务应使用 LoadingState。
说明正在处理什么
提供 label，让百分比或计数与具体任务关联；多任务并行时尤其重要。
按业务单位格式化
valueFormatter 可显示“17 / 24”等真实单位，避免无意义地把一切换算为百分比。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseProgress } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Progress 仅支持确定进度，不提供未知时长动画、阶段编排或任务取消；这些流程由宿主实现。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseProgressProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
value?: number;
max?: number;
label?: ReactNode;
showValue?: boolean;
valueFormatter?: (value: number, max: number) => ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseProgressClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 进度条当前完成量的受控数值。 | number | 0 |
max | 允许的最大数值。 | number | 100 |
label | 进度条提供给辅助技术读取的名称。 | ReactNode | — |
showValue | 是否在进度条旁显示格式化后的当前值。 | boolean | false |
valueFormatter | 把当前值和最大值转换为展示内容的函数。 | (value: number, max: number) => ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseProgressClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |