Skip to content

Loading 加载 ​

环形旋转加载指示器。支持尺寸与语义色调。

契约源:lh-ui-core/specs/loading.json · 黄金用例:lh-ui-core/cases/loading.json(5 条,已翻译为 xUnit 测试)

端侧落点说明

旋转由 WinUI 的 ProgressRing 平台动画承担(朴素调性:只发几何,动画由平台补齐)—— 令牌层只决定直径、描边宽与环色。

尺寸 ​

三档尺寸映射到 loading.size.* 直径令牌。

9:41Loading 尺寸

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

csharp
var loading = new LhLoading
{
    Size = LhLoadingSize.Large,
    Tone = LhLoadingTone.Primary,
};

色调 ​

Tone 决定环色,与语义色令牌一一对应。

9:41Loading 色调

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

API ​

属性 ​

属性说明类型默认值
Size指示器直径,映射到 loading.size.* 令牌LhLoadingSizeMedium
Tone环色,取对应语义色令牌LhLoadingTonePrimary

LhLoadingSize ​

值直径令牌
Smallloading.size.small(20epx)
Mediumloading.size.medium(28epx)
Largeloading.size.large(36epx)

LhLoadingTone ​

值环色令牌
Primarycolor.primary.default
Successcolor.success.default
Warningcolor.warning.default
Dangercolor.danger.default
Infocolor.info.default

令牌对照 ​

令牌用途
loading.size.{small,medium,large}三档直径
loading.strokeWidth加载环描边宽
color.{primary,success,warning,danger,info}.default五种环色

黄金用例对照 ​

cases/loading.json 的 5 条断言与 xUnit 测试的对应关系(tests/LhLoadingTests.cs):

case id断言本地测试
medium-size-uses-medium-token中号消费 medium 直径令牌Medium_Size_Uses_Medium_Token
large-size-uses-large-token大号消费 large 直径令牌Large_Size_Uses_Large_Token
primary-tone-uses-primary-token主色调取主色令牌Primary_Tone_Uses_Primary_Token
success-tone-uses-success-token成功色调取成功色令牌Success_Tone_Uses_Success_Token
render-emits-ring-command有且仅有一条 RING 指令Render_Emits_Ring_Command

另有暗色专项:Dark_Colors_Come_From_Dark_Tokens / Dimensions_Are_Identical_In_Dark_Mode。 运行:cd lh-ui-windows && dotnet test。