SusBadge

Счётчик или статус-метка — inline рядом с контентом или floating над хостом.

Пакет

SusKit · Молекулы (коммерческий)

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

SusKit · Molecules

Свойства

Имя	Тип	По умолчанию
Text	Prop<string>	""	v-model
Color	Prop<string>	"primary"	v-model
Dot	Prop<bool>	false	v-model
Inline	Prop<bool>	true	v-model
Floating	Prop<bool>	false	v-model
Max	Prop<int>	0	v-model

Слоты

Имя
icon

События

Публичных событий нет.

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• badge-face
• badge-face__text
• badge-face--danger
• badge-face--dot
• badge-face--info
• badge-face--primary
• badge-face--secondary
• badge-face--success
• badge-face--warning
• sus-badge--floating
• sus-badge--inline
• sus-icon
• sus-icon__image
• sus-slot

Использование

<template>
  <sus:SusBadge :Text="Count.Value"
                Color="danger"
                :Max="Max.Value"
                :Dot="Dot.Value"
                :Floating="Floating.Value"
                :Inline="Inline.Value" />
</template>

<script>
public Prop<string> Count = new("3");
public Prop<int> Max = new(99);
public Prop<bool> Dot = new(false);
public Prop<bool> Floating = new(true);
public Prop<bool> Inline = new(false);
</script>

// Floating over a host
var host = new VisualElement();
host.Add(new Label("UI"));
var badge = new SusBadge();
badge.Text.Value = "3";
badge.Color.Value = "danger";
badge.Floating.Value = true;
badge.Inline.Value = false;
host.Add(badge);

// Inline sibling
var inline = new SusBadge();
inline.Text.Value = "120";
inline.Max.Value = 99; // displays "99+"
inline.Color.Value = "primary";
inline.Inline.Value = true;
inline.Floating.Value = false;

Заметки

• Dot скрывает текст и показывает маленький индикатор.
• Max ограничивает числовой Text (например 120 + Max=99 → 99+). 0 = без ограничения.
• Floating-бейджам нужен спозиционированный хост; добавляйте бейдж как дочерний элемент этого хоста.