SusCellBar

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

Пакет

SusKit · Atoms (коммерческий)

Открыть в песочнице

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-стиль — то же правило «без C# style API», что и у остального kit.
• Смена SegmentCount пересобирает весь ряд; держите значение стабильным на экземпляр полосы, а не анимируйте его.
• Color выбирает USS token-класс и для полных ячеек, и для частичной заливки — меняйте токены в theme USS, а не стилизуйте из C#.