mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-19 15:20:25 +08:00
chinboy
85 lines
3.5 KiB
Markdown
85 lines
3.5 KiB
Markdown
# CheckBox Design Token
|
||
|
||
CheckBox 控件使用 `CheckBoxToken`（Token ID: `"CheckBox"`）作为组件级 Design Token，所有视觉属性均从全局 `SharedToken` 派生，不硬编码任何具体值。
|
||
|
||
---
|
||
|
||
## Token 资源访问方式
|
||
|
||
在 AXAML 中使用组件级 Token：
|
||
|
||
```xml
|
||
{atom:CheckBoxTokenResource CheckIndicatorSize}
|
||
{atom:CheckBoxTokenResource CheckedMarkSize}
|
||
{atom:CheckBoxTokenResource TextMargin}
|
||
```
|
||
|
||
在 AXAML 中使用全局共享 Token：
|
||
|
||
```xml
|
||
{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` |
|