SusBadge

计数或状态标记 —— 内联在内容旁，或浮动在宿主上方。

包

SusKit · 分子（商业）

在 Playground 中打开

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 表示不设上限。
• 浮动徽标需要一个已定位的宿主；将徽标作为该宿主的子元素添加。