ButtonSpinner Design Token

ButtonSpinner 使用 ButtonSpinnerToken（Token ID: "ButtonSpinner"）作为组件级 Design Token。ButtonSpinnerToken 继承自 LineEditToken，后者又继承自 AbstractControlDesignToken，因此 ButtonSpinner 可以复用所有输入控件的基础 Token 值。

Token 继承关系

AbstractControlDesignToken (SharedToken 访问)
└── LineEditToken (Token ID: "LineEdit")
    ├── InputFontSize     → SharedToken.FontSize
    ├── InputFontSizeLG   → SharedToken.FontSizeLG
    └── InputFontSizeSM   → SharedToken.FontSizeSM
        └── ButtonSpinnerToken (Token ID: "ButtonSpinner")
            ├── ControlWidth, HandleWidth, HandleIconSize
            ├── HandleBg, HandleActiveBg, HandleHoverColor
            ├── HandleBorderColor, FilledHandleBg
            └── 继承所有 LineEditToken 属性

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:ButtonSpinnerTokenResource HandleWidth}
{atom:ButtonSpinnerTokenResource HandleIconSize}
{atom:ButtonSpinnerTokenResource HandleHoverColor}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource ColorBorder}
{atom:SharedTokenResource ColorBgContainer}
{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource BorderRadius}

组件级 Token 一览

以下是 ButtonSpinnerToken 自身定义的 Token（不含继承自 LineEditToken 的部分）。

尺寸 Token

Token 名	类型	来源	说明
`ControlWidth`	`double`	固定 `90`	默认控件宽度
`HandleWidth`	`double`	`SharedToken.ControlHeightSM`	操作按钮区域宽度
`HandleIconSize`	`double`	`SharedToken.FontSize / 2`	操作按钮图标（↑↓）大小

颜色 Token

Token 名	类型	来源	说明
`HandleBg`	`Color`	`SharedToken.ColorBgContainer`	操作按钮默认背景色
`HandleActiveBg`	`Color`	`SharedToken.ColorFillAlter`	操作按钮按下态背景色
`HandleHoverColor`	`Color`	`SharedToken.ColorPrimary`	操作按钮悬浮态图标颜色
`HandleBorderColor`	`Color`	`SharedToken.ColorBorder`	操作按钮边框颜色
`FilledHandleBg`	`Color`	`ColorUtils.OnBackground(SharedToken.ColorFillSecondary, HandleBg)`	Filled 变体下操作按钮背景色

继承自 LineEditToken 的 Token

Token 名	类型	来源	说明
`InputFontSize`	`double`	`SharedToken.FontSize`	默认字体大小
`InputFontSizeLG`	`double`	`SharedToken.FontSizeLG`	大号字体大小
`InputFontSizeSM`	`double`	`SharedToken.FontSizeSM`	小号字体大小

主题中使用的全局 SharedToken

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

ButtonSpinnerTheme 使用的 SharedToken

Token 资源键	使用场景
`EnableMotion`	控制是否启用动画过渡
`BorderRadius`	Middle 尺寸圆角
`BorderRadiusSM`	Small 尺寸圆角
`BorderRadiusLG`	Large 尺寸圆角

ButtonSpinnerHandleTheme 使用的 SharedToken

Token 资源键	使用场景
`ColorBorder`	操作按钮容器边框颜色
`BorderThickness`	操作按钮容器边框粗细
`ColorBgContainer`	操作按钮容器背景色
`ColorPrimaryActive`	操作按钮按下态图标颜色

Token 对外观的具体影响

操作按钮区域

视觉元素	默认态 Token	悬浮态 Token	按下态 Token
背景色	`HandleBg`	—	`HandleActiveBg`
图标颜色	继承主题默认色	`HandleHoverColor`（主色）	`ColorPrimaryActive`（主色激活态）
边框颜色	`HandleBorderColor`	—	—
图标大小	`HandleIconSize`	—	—
区域宽度	`HandleWidth`	—	—

整体控件

视觉元素	Token	说明
Large 尺寸圆角	`SharedToken.BorderRadiusLG`	`SizeType="Large"` 时的圆角
Middle 尺寸圆角	`SharedToken.BorderRadius`	`SizeType="Middle"` 时的圆角
Small 尺寸圆角	`SharedToken.BorderRadiusSM`	`SizeType="Small"` 时的圆角
浮动动画时长	`SharedToken.MotionDurationMid`	操作按钮滑入/滑出的动画时长

Filled 变体

视觉元素	Token	说明
操作按钮背景色	`FilledHandleBg`	Filled 变体下操作按钮背景区分于默认 `HandleBg`

注意事项

ButtonSpinnerToken 继承自 LineEditToken，因此当修改 LineEditToken 的 Token 值时，ButtonSpinner 也会受到影响。
操作按钮的悬浮/按下态使用主题主色（ColorPrimary / ColorPrimaryActive），确保与 AtomUI 整体主题一致。
ControlWidth 固定为 90，是少数未从 SharedToken 派生的 Token 值之一——这是因为 ButtonSpinner 通常需要精确的默认宽度。

4.9 KiB Raw Permalink Blame History Unescape Escape