5.5 KiB
ToggleSwitch Token 设计
本文档定义 AtomUI.Desktop.Controls.ToggleSwitchToken 的专属语义、分类、使用范围和兼容边界。控件 Token 的通用分层、命名、计算、Theme Variables 边界和预设色规则见 AtomUI 控件 Token 设计规范。ToggleSwitch 整体架构见 ToggleSwitch 桌面版架构设计,内部实现原理见 ToggleSwitch 桌面版实现原理,设计和契约变化记录见 ToggleSwitch Changelog。
1. 定位
ToggleSwitchToken 是 ToggleSwitch 的控件级 Token scope,描述轨道尺寸、把手尺寸、内容边距、图标尺寸、开关颜色、禁用透明度、内容字体、把手阴影和加载指示。
ToggleSwitchToken 不承载以下状态:
IsChecked、IsLoading、IsPressed、IsPointerOver、IsEnabled等实例状态。OnContent、OffContent或内容模板。- Form value、校验状态或业务异步状态。
- 当前把手位置、内容偏移、加载旋转角度或动画运行状态。
2. Token 分类
2.1 轨道尺寸 Token
TrackHeightTrackHeightSMTrackMinWidthTrackMinWidthSMTrackPadding
这些 Token 控制 ToggleSwitch 的胶囊轨道高度、最小宽度和内部 padding。普通尺寸根据 SharedToken 字号和行高计算,小号高度使用 SharedToken.ControlHeight / 2。
2.2 把手 Token
HandleBgHandleShadowHandleSizeHandleSizeSM
这些 Token 控制把手背景、阴影和普通/小号尺寸。按下时把手宽度由运行时 STRETCH_FACTOR 拉伸,不作为 Token。
2.3 内容边距 Token
InnerMinMarginInnerMaxMarginInnerMinMarginSMInnerMaxMarginSM
这些 Token 控制 on/off 内容在轨道内与把手之间的可用空间。控件测量会把内容最大宽度与这组边距合并,确保文本或图标内容不与把手重叠。
2.4 图标和字体 Token
IconSizeIconSizeSMExtraInfoFontSizeExtraInfoFontSizeSM
这些 Token 用于内部文字和图标内容。OnContent / OffContent 为 PathIcon 或 Icon 时,控件把 IconSize 同步到图标宽高。
2.5 状态颜色和透明度 Token
SwitchColorSwitchDisabledOpacityOffStateLoadIndicatorColor
SwitchColor 用于 checked 轨道和 checked 状态 loading 指示。unchecked 轨道和 hover 色来自 SharedToken。SwitchDisabledOpacity 用于 disabled 和 loading 状态整体透明度。OffStateLoadIndicatorColor 用于 unchecked loading 指示。
2.6 加载动画 Token
LoadingAnimationDuration
该 Token 控制 SwitchKnob loading arc 的旋转周期。它不表达当前旋转角度或动画是否运行。
3. 控件专项模型中的 Token 使用
ToggleSwitchToken 使用路径:
SharedToken
↓
ToggleSwitchToken
↓
ToggleSwitchTheme / SwitchKnobTheme
↓
AbstractToggleSwitch + SwitchKnob
尺寸分支:
SizeType=Small
→ TrackHeightSM / TrackMinWidthSM / HandleSizeSM
→ InnerMinMarginSM / InnerMaxMarginSM / IconSizeSM / ExtraInfoFontSizeSM
SizeType=Middle|Large|Custom
→ TrackHeight / TrackMinWidth / HandleSize
→ InnerMinMargin / InnerMaxMargin / IconSize / ExtraInfoFontSize
Custom 当前复用普通尺寸分支。用户通过显式属性覆盖尺寸时,Token 仍作为默认值来源。
4. 控件家族影响
ToggleSwitchToken 直接影响:
ToggleSwitchTheme.axamlSwitchKnobTheme.axamlAbstractToggleSwitch的测量、布局和渲染结果SwitchKnob的把手绘制和 loading animation- Gallery ToggleSwitch 示例和 token.md 语义说明
ToggleSwitchToken 不影响 Checkbox、Radio、Segmented、Button 或 Select。这些控件有独立状态选择模型和 Token。
5. 兼容性要求
ToggleSwitchToken 属于 ToggleSwitch 主题契约。即使 ToggleSwitchToken 是 internal 类型,生成的 ToggleSwitchTokenKind、AXAML resource 使用点和 token.md 语义说明已经形成稳定依赖。
Token 变更要求:
- 不擅自重命名、删除或迁移既有 Token。
- 不把
IsChecked、IsLoading、IsPressed、内容实例或 Form 值迁移为 Token。 - 不新增未经授权的
Custom专属 Token 组。 - 不把 unchecked hover 色复制到 ToggleSwitchToken;当前由 SharedToken selector 表达。
- 调整尺寸 Token 时必须同时验证内容测量、把手位置、loading arc 和 Gallery 示例。
- 需要破坏性变更时,必须先说明影响范围并获得授权。
6. 验证策略
| 改动类型 | 验证要求 |
|---|---|
| 修改轨道尺寸 Token | 验证普通、小号和 Custom 默认尺寸下高度、最小宽度、hit test 和轨道绘制。 |
| 修改把手 Token | 验证把手位置、按下拉伸、loading arc 居中和 checked/unchecked 两端对齐。 |
| 修改内容边距 Token | 验证文字、图标、较长 on/off 内容和小号内容不与把手重叠。 |
| 修改图标或字体 Token | 验证 text content、PathIcon、Icon 的字号、尺寸和前景色同步。 |
| 修改状态颜色或透明度 Token | 验证 checked、unchecked、hover、disabled、loading 和 loading indicator 颜色。 |
| 修改加载动画 Token | 验证 loading animation 周期、attach/detach 取消和停止 loading 状态。 |
| 删除或重命名 Token | 默认不允许;如获授权,需同步 AXAML 引用、生成文件、Token 类型、生成数据和 token.md和控件文档。 |
| 文档改动 | 运行 git diff --check,检查文档链接存在。 |