SusCellBar

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

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Value	Prop<float>	0f
Max	Prop<float>	100f
SegmentCount	Prop<int>	10
Color	Prop<string>	"primary"

Slots

No slots.

Events

No public events.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• 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

Usage

<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;

Color

primary · secondary · success · danger · warning · info

Notes

• Segments fill left-to-right by the proportion of Value / Max; a partially-filled segment uses a discrete 10% USS width bucket (sus-cell-bar__fill--pct-N), not an inline style — same "no C# style API" rule as the rest of the kit.
• SegmentCount changes rebuild the whole row; keep it stable per bar instance rather than animating it.
• Color picks the USS token class for both full cells and the partial-fill overlay — swap tokens in your theme USS rather than styling from C#.