SusCellBar

Segmented resource bar — HP/MP cells split into discrete blocks; fill color via USS token classes only.

包

SusKit · Atoms（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Value	Prop<float>	0f
Max	Prop<float>	100f
SegmentCount	Prop<int>	10
Color	Prop<string>	"primary"

插槽

没有插槽。

事件

没有公开事件。

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-cell-bar
• sus-cell-bar__cell
• sus-cell-bar__cell--empty
• sus-cell-bar__cell--full
• sus-cell-bar__cell--gap
• sus-cell-bar__cell--partial
• sus-cell-bar__fill
• sus-cell-bar__fill--pct-10
• sus-cell-bar__fill--pct-20
• sus-cell-bar__fill--pct-30
• sus-cell-bar__fill--pct-40
• sus-cell-bar__fill--pct-50
• sus-cell-bar__fill--pct-60
• sus-cell-bar__fill--pct-70
• sus-cell-bar__fill--pct-80
• sus-cell-bar__fill--pct-90
• sus-cell-bar__row
• sus-cell-bar--color-danger
• sus-cell-bar--color-info
• sus-cell-bar--color-primary
• sus-cell-bar--color-secondary
• sus-cell-bar--color-success
• sus-cell-bar--color-warning

用法

<template>
  <sus:SusCellBar :Value="Hp.Value"
                  Max="100"
                  SegmentCount="10"
                  Color="danger" />
</template>

<script>
public Prop<float> Hp = new(64f);
</script>

var hpBar = new SusCellBar();
hpBar.Max.Value = 100f;
hpBar.SegmentCount.Value = 10;
hpBar.Color.Value = "success";
hpBar.Value.Value = 80f;

颜色

primary · secondary · success · danger · warning · info

说明

• 段按 Value / Max 比例从左到右填充；部分填充的段使用离散的 10% USS 宽度桶（sus-cell-bar__fill--pct-N），而非 inline 样式 — 与 kit 其余部分相同的「禁止 C# style API」规则。
• 更改 SegmentCount 会重建整行；对每个条实例保持稳定，不要对其做动画。
• Color 为满格与部分填充覆盖层选择 USS token 类 — 在主题 USS 中替换 token，而不是从 C# 设样式。