SusWallet

大厅或商店顶栏的货币条 — 名称 / 数值项，余额未知时显示破折号，数值变化时闪烁脉冲。

包

SusGame · 分子（商业）

在 Playground 中打开

SusGame · Molecules

属性

名称	类型	默认值
Icon	Prop<string>	""
EmptyValue	Prop<string>	"—"

插槽

没有插槽。

事件

没有公开事件。

样式钩子

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

• sus-hidden
• sus-wallet
• sus-wallet__icon
• sus-wallet__item
• sus-wallet__item--empty
• sus-wallet__item--first
• sus-wallet__item-icon
• sus-wallet__item-label
• sus-wallet__item-value
• sus-wallet__item-value--flash

SusWallet

用于大厅或商店页头的货币条 — 标签/数值条目，余额未知时显示短横，余额变化时脉冲提示。

使用

SusWallet 显示一排货币条目。通过 SetEntries 传入列表。每个条目都有可选图标、标签和数值。 数值是由你自行格式化的字符串，例如 "12 400"，因此组件从不替你决定数字格式和区域设置。

var wallet = new SusWallet();
wallet.Icon.Value = "coins";            // optional wallet-level icon
wallet.SetEntries(new List<SusWallet.SusWalletEntry>
{
    SusWallet.SusWalletEntry.Of("gold", "Gold", "12 400", "coin"),
    SusWallet.SusWalletEntry.Of("gems", "Gems", "35", "diamond"),
    // Balance not loaded yet: the item renders empty and shows EmptyValue.
    new SusWallet.SusWalletEntry { Code = "tokens", Label = "Tokens", Available = false },
});

// After a balance change: replace the entries, then pulse the changed value.
wallet.FlashValue("gold");

<template>
  <sus:SusWallet :Icon="WalletIcon.Value" :EmptyValue="Dash.Value" />
</template>

<script>
public Prop<string> WalletIcon = new("coins");
public Prop<string> Dash = new("—");
</script>

在大厅中通常无需自己创建钱包。 SusLobbyScreenContent 的页头里就有一个：调用 lobby.SetWallet(entries)，在列表至少有一个条目之前它保持隐藏。

Prop / API	作用
Icon	位于条目之前的钱包级图标键（sus-wallet__icon）；为空（默认）→ 隐藏
EmptyValue	作为空条目数值显示的文本（默认 "—"）
SetEntries(entries)	按显示顺序替换条目；null 或空列表会清空它们
Entries	最近一次 SetEntries 调用传入的条目（只读）
FlashValue(code)	为该条目的数值添加 sus-wallet__item-value--flash，持续 ValueFlashMs（600 ms）；未知代码不做任何事
WalletIcon	Icon 背后的 SusIcon，供宿主接线

条目

SusWallet.SusWalletEntry 是普通结构体：

字段	含义
Code	稳定的货币 id（"gold"）— FlashValue 的键
Label	数值前的标签；为空时回退为 Code
Value	已格式化的余额文本；为空时条目显示为空
IconKey	该货币的可选图标（sus-wallet__item-icon）
Available	false = 余额未知或仍在加载：条目获得 sus-wallet__item--empty 并显示 EmptyValue

与结构体的每个 bool 字段一样，Available 默认为 false。用 SusWalletEntry.Of(...) 构建条目会把它设为 true，或者自己设置。用 new SusWalletEntry { ... } 创建且未写 Available = true 的条目会显示为空。

皮肤钩子

类	所在元素
sus-wallet	根行；没有条目也没有图标时尺寸为零
sus-wallet__icon	钱包级图标
sus-wallet__item	单个货币条目（行）；第一个条目带 sus-wallet__item--first
sus-wallet__item-icon	条目图标
sus-wallet__item-label	条目标签
sus-wallet__item-value	条目数值
sus-wallet__item--empty	余额未知或为空的条目
sus-wallet__item-value--flash	FlashValue 脉冲期间的数值

脉冲是一个类，而不是过渡动画（transition）。包用信号令牌为闪烁中的数值着色，并通过计时器移除该类。 皮肤可以重新设定该类的样式，或添加自己的 USS 过渡。颜色和尺寸来自 --sk-* 令牌，因此货币条会跟随你的主题。

注意

• 替换条目会重建各条目，并取消正在进行的脉冲。
• 条目在屏幕上的顺序就是所传列表的顺序。