Files

3.5 KiB
Raw Permalink Blame History

CheckBox Design Token

CheckBox 控件使用 CheckBoxToken(Token ID: "CheckBox")作为组件级 Design Token,所有视觉属性均从全局 SharedToken 派生,不硬编码任何具体值。


Token 资源访问方式

在 AXAML 中使用组件级 Token:

{atom:CheckBoxTokenResource CheckIndicatorSize}
{atom:CheckBoxTokenResource CheckedMarkSize}
{atom:CheckBoxTokenResource TextMargin}

在 AXAML 中使用全局共享 Token:

{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ColorBorder}
{atom:SharedTokenResource BorderRadiusSM}

组件级 Token 一览

以下是 CheckBoxToken 定义的全部组件级 Token。

指示器 Token

Token 名 类型 来源 说明
CheckIndicatorSize double SharedToken.ControlInteractiveSize 复选框指示器(方框)的大小
CheckedMarkSize double CheckIndicatorSize × 0.6 选中对勾图标的大小
IndicatorTristateMarkSize double SharedToken.FontSizeLG / 2 不确定态横杠的大小

间距 Token

Token 名 类型 来源 说明
TextMargin Thickness SharedToken.UniformlyMarginXS, 0 文本与指示器之间的左右间距

主题中使用的全局 SharedToken

除组件级 Token 外,CheckBox 的 ControlTheme 还直接引用了以下全局 SharedToken:

Token 资源键 使用场景
ColorText 复选框文本颜色
ColorTextDisabled 禁用态文本颜色
ColorPrimary 选中态指示器背景色、半选态横杠颜色
ColorPrimaryHover 悬浮态指示器边框色(选中时为背景色)
ColorBgContainer 未选中态指示器背景色
ColorBgContainerDisabled 禁用态指示器背景色
ColorBorder 未选中态指示器边框色、禁用态边框色
BorderThickness 指示器边框粗细(应用于 CheckBoxIndicator,而非 CheckBox 自身)
BorderRadiusSM 指示器圆角半径
EnableMotion 全局动画开关
EnableWaveSpirit 全局波纹开关
SpacingXS CheckBoxGroup 子项间距(ItemSpacing / LineSpacing 默认值)

⚠️ 已知偏差:选中态对勾颜色(CheckedMarkBrush)在当前主题中使用了硬编码的 White,而非通过 Token 资源引用(如 ColorTextLightSolid)。这意味着在深色主题下对勾仍为白色,通常视觉效果正确,但不完全遵循 Token 系统。


Token 对外观的具体影响

选中状态与 Token 映射

状态 指示器背景 指示器边框 对勾/横杠颜色 文本颜色
未选中 ColorBgContainer ColorBorder — ColorText
未选中 + 悬浮 ColorBgContainer ColorPrimaryHover — ColorText
选中 ColorPrimary ColorPrimary White ColorText
选中 + 悬浮 ColorPrimaryHover ColorPrimaryHover White ColorText
不确定 ColorBgContainer ColorBorder ColorPrimary ColorText
不确定 + 悬浮 ColorBgContainer ColorPrimaryHover ColorPrimary ColorText
禁用(未选中) ColorBgContainerDisabled ColorBorder — ColorTextDisabled
禁用(选中) ColorBgContainerDisabled ColorBorder ColorTextDisabled ColorTextDisabled
禁用(不确定) ColorBgContainerDisabled ColorBorder ColorTextDisabled ColorTextDisabled