OptionButtonGroup Design Token

OptionButtonGroup 和 OptionButton 控件使用 OptionButtonToken（Token ID: "OptionButton"）作为组件级 Design Token。所有视觉属性均从全局 SharedToken 派生，不硬编码任何具体值。

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:OptionButtonTokenResource ButtonBackground}
{atom:OptionButtonTokenResource ButtonSolidCheckedBackground}
{atom:OptionButtonTokenResource ContentFontSize}
{atom:OptionButtonTokenResource Padding}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ControlHeight}
{atom:SharedTokenResource BorderRadius}

组件级 Token 一览

以下是 OptionButtonToken 定义的全部组件级 Token，按功能分组说明。

颜色 Token

Token 名	类型	来源	说明
`ButtonBackground`	`Color`	`SharedToken.ColorBgContainer`	按钮默认背景色
`ButtonCheckedBackground`	`Color`	`SharedToken.ColorBgContainer`	选中按钮背景色（Outline 模式）
`ButtonColor`	`Color`	`SharedToken.ColorText`	按钮默认文本颜色
`ButtonCheckedBgDisabled`	`Color`	`SharedToken.ControlItemBgActiveDisabled`	选中并禁用时的背景色
`ButtonCheckedColorDisabled`	`Color`	`SharedToken.ColorTextDisabled`	选中并禁用时的文本颜色
`ButtonSolidCheckedColor`	`Color`	`SharedToken.ColorTextLightSolid`	Solid 模式选中时文本颜色（通常为白色）
`ButtonSolidCheckedBackground`	`Color`	`SharedToken.ColorPrimary`	Solid 模式选中时背景色
`ButtonSolidCheckedHoverBackground`	`Color`	`SharedToken.ColorPrimaryHover`	Solid 模式选中悬浮时背景色
`ButtonSolidCheckedActiveBackground`	`Color`	`SharedToken.ColorPrimaryActive`	Solid 模式选中按下时背景色
`ButtonPadding`	`Thickness`	`SharedToken.UniformlyPadding`	按钮内间距（水平方向）

字体 Token

Token 名	类型	来源	说明
`ContentFontSize`	`double`	`SharedToken.FontSize`	中号按钮字体大小
`ContentFontSizeLG`	`double`	`SharedToken.FontSizeLG`	大号按钮字体大小
`ContentFontSizeSM`	`double`	`SharedToken.FontSize`	小号按钮字体大小
`ContentLineHeight`	`double`	基于 `ContentFontSize` 计算	中号按钮行高
`ContentLineHeightLG`	`double`	基于 `ContentFontSizeLG` 计算	大号按钮行高
`ContentLineHeightSM`	`double`	基于 `ContentFontSizeSM` 计算	小号按钮行高

内间距 Token

Token 名	类型	来源	说明
`Padding`	`Thickness`	基于 `SharedToken.PaddingContentHorizontal`、`SharedToken.ControlHeight`	中号按钮内间距
`PaddingLG`	`Thickness`	基于 `SharedToken.PaddingContentHorizontal`、`SharedToken.ControlHeightSM`	大号按钮内间距
`PaddingSM`	`Thickness`	基于固定值 `8`、`SharedToken.ControlHeightLG`	小号按钮内间距

主题中使用的全局 SharedToken

除组件级 Token 外，OptionButtonGroup 的 ControlTheme 还直接引用了以下全局 SharedToken：

OptionButtonGroup 主题引用

Token 资源键	使用场景
`EnableMotion`	全局动画开关
`EnableWaveSpirit`	全局波纹开关
`ControlHeight` / `ControlHeightSM` / `ControlHeightLG`	三种尺寸的组高度
`BorderRadius` / `BorderRadiusSM` / `BorderRadiusLG`	三种尺寸的圆角半径
`ColorBorder`	组外围边框颜色
`ColorPrimary`	选中项边框颜色（`SelectedOptionBorderColor`）
`BorderThickness`	组外围边框厚度

OptionButton 主题引用

Token 资源键	使用场景
`SpacingXXS`	图标与文本之间的间距（`DockPanel.HorizontalSpacing`）
`ColorText`	未选中按钮文本颜色（Solid 模式）
`ColorPrimary`	选中按钮前景色和边框色（Outline 模式）
`ColorPrimaryHover`	悬浮时前景色/边框色
`ColorPrimaryActive`	按下时前景色/边框色
`ColorBorder`	禁用态边框颜色
`ColorTextDisabled`	禁用态文本颜色
`ColorBgContainerDisabled`	禁用态背景色
`IconSize` / `IconSizeSM` / `IconSizeLG`	三种尺寸的图标大小

Token 对外观的具体影响

按钮样式与 Token 映射

Solid 模式

状态	前景色	背景色
选中	`ButtonSolidCheckedColor`（白色）	`ButtonSolidCheckedBackground`（主色）
选中 + 悬浮	`ButtonSolidCheckedColor`	`ButtonSolidCheckedHoverBackground`
选中 + 按下	`ButtonSolidCheckedColor`	`ButtonSolidCheckedActiveBackground`
未选中	`ColorText`	透明
未选中 + 悬浮	`ColorPrimaryHover`	透明
未选中 + 按下	`ColorPrimaryActive`	透明
禁用	`ColorTextDisabled`	`ColorBgContainerDisabled`
禁用 + 选中	`ButtonCheckedColorDisabled`	`ButtonCheckedBgDisabled`

Outline 模式

状态	前景色	边框色	背景色
选中	`ColorPrimary`	`ColorPrimary`	透明
未选中	`ButtonColor`	`ColorBorder`	透明
悬浮	`ColorPrimaryHover`	`ColorPrimaryHover`	透明
按下	`ColorPrimaryActive`	`ColorPrimaryActive`	透明
禁用	`ColorTextDisabled`	`ColorBorder`	`ColorBgContainerDisabled`
禁用 + 选中	`ButtonCheckedColorDisabled`	`ColorBorder`	`ButtonCheckedBgDisabled`

尺寸与 Token 映射

尺寸	组高度	圆角	字号	内间距	图标大小
`Large`	`ControlHeightLG`	`BorderRadiusLG`	`ContentFontSizeLG`	`PaddingLG`	`IconSizeLG`
`Middle`	`ControlHeight`	`BorderRadius`	`ContentFontSize`	`Padding`	`IconSizeLG`
`Small`	`ControlHeightSM`	`BorderRadiusSM`	`ContentFontSizeSM`	`PaddingSM`	`IconSizeSM`

5.9 KiB Raw Permalink Blame History Unescape Escape