Skip to content

Switch 开关 ​

开关。胶囊轨道 + 圆形滑块,点击切换;支持禁用与加载中。

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

基础用法 ​

9:41Switch 基础

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

csharp
var sw = new LhSwitch { Checked = true };
sw.Change += isChecked => { };

尺寸 ​

三档尺寸映射到 switch.width / switch.height 令牌;滑块直径 = 高度 - 2 × switch.gap。

9:41Switch 尺寸

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

状态 ​

Disabled 与 Loading 都不响应点击;Loading 时滑块位置改画主色加载环。

9:41Switch 状态

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

API ​

属性 ​

属性说明类型默认值
Change开关态变化回调;disabled 或 loading 时不触发event Action<bool>—
Checked是否开启boolfalse
Disabled是否禁用(不响应点击且呈现禁用样式)boolfalse
Loading是否加载中(滑块位置显示加载环且不响应点击)boolfalse
Size开关尺寸,映射到 switch.width / switch.height 令牌LhSwitchSizeMedium

LhSwitchSize ​

值widthheight
Smallswitch.width.small(40epx)switch.height.small(22epx)
Mediumswitch.width.medium(48epx)switch.height.medium(26epx)
Largeswitch.width.large(56epx)switch.height.large(30epx)

令牌对照 ​

令牌用途
switch.width.{small,medium,large}三档轨道宽度
switch.height.{small,medium,large}三档轨道高度
switch.gap滑块与轨道留白(滑块直径 = 高度 - 2 × gap)
color.primary.default开启轨道色
color.border.base关闭轨道色
color.onPrimary滑块色
color.disabled.bg / color.text.disabled禁用轨道/滑块色

黄金用例对照 ​

cases/switch.json 的 6 条断言与 xUnit 测试的对应关系(tests/LhSwitchTests.cs):

case id断言本地测试
tap-toggles-and-emits-onchange点击切换并触发 onChangeTap_Toggles_And_Emits_OnChange
tap-checked-turns-off开启态点击关闭Tap_Checked_Turns_Off
disabled-blocks-change禁用态不可交互Disabled_Blocks_Change
loading-blocks-change加载态不可交互Loading_Blocks_Change
checked-uses-primary-token开启态消费主色令牌Checked_Uses_Primary_Token
unchecked-uses-border-token关闭态消费描边令牌Unchecked_Uses_Border_Token

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