UI
本页目录

组件 · 反馈

Progress 进度条

进度展示：Track/Indicator/Label/Value 部件。

入口 @selrux/ui/progress · 源码 src/components/progress/index.ts · 5 个组件 · 发布状态 preview

使用建议

  • 避免：把不确定进度当成确定百分比
  • 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx
import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from '@selrux/ui/progress';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

上传进度
60%

代码演示

基础用法

Track + Indicator，value 为当前值。

上传进度
60%

语义色

color 语义色。

不确定进度

value={null} 表示进行中但进度未知。

范围、尺寸与格式

min / max 自定义范围；size 六档；ProgressValue 的 formatValue 自定义显示文本。

已处理工单（sm）
50 / 200 单
已处理工单（md）
100 / 200 单
已处理工单（lg）
150 / 200 单

API

属性覆盖：示例用到 6 / 6 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Progress

主题化进度条。

属性说明类型默认值
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-
color-"info" | "success" | "warning" | "primary" | "destructive" | "carbon" | "secondary" | "accent"-
value当前值；null/undefined 表示不确定进度。number | null-
max最大值，默认 100。number100
min最小值，默认 0。number0

另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。

ProgressIndicator

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

ProgressLabel

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

ProgressTrack

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

ProgressValue

属性说明类型默认值
formatValue自定义格式化；默认百分比整数。((value: number | null, max: number) => string)-

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

导出类型：ProgressColor、ProgressIndicatorProps、ProgressLabelProps、ProgressProps、ProgressSize、ProgressTrackProps、ProgressValueProps