mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-19 23:30:44 +08:00
chinboy
135 lines
5.9 KiB
Markdown
135 lines
5.9 KiB
Markdown
# OptionButtonGroup Design Token
|
||
|
||
OptionButtonGroup 和 OptionButton 控件使用 `OptionButtonToken`（Token ID: `"OptionButton"`）作为组件级 Design Token。所有视觉属性均从全局 `SharedToken` 派生，不硬编码任何具体值。
|
||
|
||
---
|
||
|
||
## Token 资源访问方式
|
||
|
||
在 AXAML 中使用组件级 Token：
|
||
|
||
```xml
|
||
{atom:OptionButtonTokenResource ButtonBackground}
|
||
{atom:OptionButtonTokenResource ButtonSolidCheckedBackground}
|
||
{atom:OptionButtonTokenResource ContentFontSize}
|
||
{atom:OptionButtonTokenResource Padding}
|
||
```
|
||
|
||
在 AXAML 中使用全局共享 Token：
|
||
|
||
```xml
|
||
{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` |
|