INTERACTIVE COMPONENT SPEC

游戏进度条组合控件

先选择要查看的进度条，再通过右侧参数面板配置当前实例。三种控件共用一套交互入口，但配置互不混淆。

COMPONENTS / 01

选择进度条类型

点击缩略图切换预览和配置

01CORE

基础进度条ProgressBarCore

02RESOURCE

∞

资源型组合控件ResourceProgressBar

03MILESTONE

里程碑型组合控件MilestoneProgressBar

PREVIEW / 02

资源型组合控件

VALUE26PROGRESS26%

RESOURCE INSTANCE

26/100

∞

琥珀橙填充 · 5 段 · 标准尺寸 · 遮挡补偿 24px

CONTROLS / 03

资源型组合控件配置

基础进度设置

当前进度26最大值100

文本模式

填充配色

前沿特效

进度动画业务值和展示值分离，平滑追帧

资源型组合设置

左侧消耗图标图标使用资源插槽，不写死业务类型右侧目标图标可选目标物或活动道具图标遮挡补偿刨除前后图标遮住的轨道，按可见区域映射进度单侧遮挡像素24px

分段显示

分段数量5紧凑尺寸用于列表、弹窗等受限空间

当前实例配置

{
  "component": "ResourceProgressBar",
  "core": {
    "value": 26,
    "maxValue": 100,
    "fillTone": "amber",
    "textMode": "center",
    "animate": true,
    "effectMode": "increase"
  },
  "composition": {
    "leftIcon": "energy",
    "rightIcon": "potion",
    "segmentMode": "uniform",
    "segmentCount": 5,
    "size": "standard",
    "iconOcclusionCompensation": 24
  }
}

参数说明路径与上方当前实例 JSON 保持一致13 项

实例与核心进度

componentResourceProgressBar

资源型组合进度条组件类型标识。

core.valuenumber

当前业务进度，展示时会限制在 0 到 maxValue 之间。

core.maxValuenumber

进度最大值，必须大于 0。

core.fillToneamber | lime | coral | cyan

进度填充色主题。

core.textModenone | center | follow

进度文本隐藏、居中或跟随进度头显示。

core.animateboolean

业务值变化时是否播放平滑追帧动画。

core.effectModeoff | increase | always

关闭特效、增长时播放一次或持续显示前沿特效。

资源组合

composition.leftIconresource | null

左侧消耗图标；为 null 时隐藏。

composition.rightIconresource | null

右侧目标图标；为 null 时隐藏。

composition.segmentModenone | uniform

资源型轨道的连续或均匀分段模式。

composition.segmentCountnumber

分段数量；连续模式下输出 0。

composition.sizestandard | compact

标准或紧凑尺寸。

composition.iconOcclusionCompensationnumber

单侧图标遮挡轨道的补偿像素；0 表示关闭。