Progress 进度条
Feedback
展示型
Introduction
一个用于传达操作完成进度的可视化状态组件。它通过标准线性条跟踪器或现代圆形表盘指示器显示实时状态值。主要用于在多步骤向导、内容上传、文件处理或系统安装过程中引导用户。
Progress 组件已作为 progress 区块完全集成到 Page Builder 中，使内容作者和开发人员能够直接在 CMS 中轻松配置视觉范围、主题、尺寸、标签和指示器布局。
Usage
以下示例展示了内容编辑人员如何绑定和构建交互式进度指示器。
1. 带状态标签的标准线性进度条
显示下载或处理进度的经典线性条指示器，带有活动标签详情和格式化百分比文本。
{
"type": "progress",
"label": "System Backup",
"value": 72,
"showValueText": true,
"type": "linear",
"size": "md"
}
System Backup
72%
2. 紧凑型圆形进度表
将完成指标渲染为紧凑的圆形表盘。适用于统计概览图表、迷你仪表盘小组件或独立网格项。
{
"type": "progress",
"label": "Storage Used",
"type": "circular",
"value": 40,
"showValueText": true
}
Storage Used40%
3. 带自定义颜色（成功绿）的强调条纹进度
演示如何将专用颜色主题调色板、条纹视觉图案和大的视觉布局比例应用到进度操作条。
{
"type": "progress",
"label": "Uploading media files",
"value": 85,
"showValueText": true,
"striped": true,
"colorPalette": "green",
"size": "lg"
}
Uploading media files
85%
Props
| 属性 | CMS 字段类型 | 默认值 | 描述 / 支持的选项 |
|---|---|---|---|
进度标签 (label) | string | - | 位于指示器轨道上方可选的描述性标题。 |
当前值 (value) | number | 0 | 数值完成度。设为 null 可渲染不确定（加载中）状态。 |
最小值 (min) | number | 0 | 进度标尺的下限。 |
最大值 (max) | number | 100 | 进度标尺的上限。 |
显示百分比 (showValueText) | boolean | false | 勾选后，在跟踪器旁显示精确的数值百分比文本。 |
指示器类型 (type) | select | "linear" | 进度布局的视觉设计格式。 • 选项： "linear"、"circular"。 |
视觉变体 (variant) | select | "solid" | 轨道与填充区间的视觉样式。 • 选项： "solid"、"subtle"。 |
边框形状 (shape) | select | "full" | 应用于线性轨道的圆角。 • 选项： "square"、"rounded"、"full"。 |
条纹轨道 (striped) | boolean | false | 在线性条上渲染视觉斜纹图案。 |
颜色主题 (colorPalette) | select | "blue" | 应用于轨道进度填充的主题调色板。 • 选项：blue、green、red、purple、orange、amber、cyan、slate。 |
尺寸比例 (size) | select | "md" | 控制垂直高度或圆形半径比例。 • 选项： "xs"、"sm"、"md"、"lg"、"xl"。 |
Developer Notes & Accessibility
- 无需注水（纯静态）： 进度条组件纯粹通过布局绑定和标准 CSS 动画运行，被指定为纯静态组件（Tier 3），零客户端 JavaScript 包体积。
- WAI-ARIA 合规性： 在底层，该组件编译为标准语义进度包装器（
role="progressbar"、aria-valuenow、aria-valuemin、aria-valuemax）。如果 value 属性未设置或为 null，它会自动切换到不确定（加载中）状态。