mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-19 23:30:44 +08:00
chinboy
95 lines
3.8 KiB
Markdown
95 lines
3.8 KiB
Markdown
# IconButton Design Token
|
||
|
||
IconButton 控件复用 `ButtonToken`（Token ID: `"Button"`）作为组件级 Design Token 作用域。由于 IconButton 的模板非常轻量，它主要消费全局 `SharedToken` 中的值，不直接使用 `ButtonToken` 中的大部分颜色、间距和字体 Token。
|
||
|
||
---
|
||
|
||
## Token 架构说明
|
||
|
||
### 为什么复用 ButtonToken？
|
||
|
||
IconButton 在构造函数中注册了 `ButtonToken.ScopeProvider`：
|
||
|
||
```csharp
|
||
public class IconButton : AbstractIconButton
|
||
{
|
||
public IconButton()
|
||
{
|
||
this.RegisterTokenResourceScope(ButtonToken.ScopeProvider);
|
||
}
|
||
}
|
||
```
|
||
|
||
这意味着 IconButton 模板中可以使用 `{atom:TokenResource ...}` 引用 `ButtonToken` 的所有 Token 属性。但实际上，IconButton 的极简主题模板仅使用全局 `SharedToken`，并未直接引用 `ButtonToken` 的组件级 Token。这种设计保留了扩展灵活性——如果未来 IconButton 需要更丰富的样式变体，可以直接引用 `ButtonToken` 的 Token 而无需修改 Token 作用域注册。
|
||
|
||
---
|
||
|
||
## Token 资源访问方式
|
||
|
||
在 AXAML 中，IconButton 主题使用全局共享 Token：
|
||
|
||
```xml
|
||
<!-- IconButton 主题中实际使用的 Token -->
|
||
{atom:SharedTokenResource ColorIcon}
|
||
{atom:SharedTokenResource ColorIconHover}
|
||
{atom:SharedTokenResource ColorText}
|
||
{atom:SharedTokenResource ColorTextDisabled}
|
||
{atom:SharedTokenResource IconSizeSM}
|
||
{atom:SharedTokenResource BorderRadiusSM}
|
||
{atom:SharedTokenResource EnableMotion}
|
||
```
|
||
|
||
---
|
||
|
||
## 消费的全局 SharedToken
|
||
|
||
以下是 IconButton 主题模板（`IconButtonTheme.axaml`）中直接引用的全部 SharedToken：
|
||
|
||
| Token 资源键 | 类型 | 使用场景 |
|
||
|---|---|---|
|
||
| `ColorIcon` | `Color` | 正常态图标颜色 |
|
||
| `ColorIconHover` | `Color` | 悬浮态图标颜色 |
|
||
| `ColorText` | `Color` | 按下态图标颜色 |
|
||
| `ColorTextDisabled` | `Color` | 禁用态图标颜色 |
|
||
| `IconSizeSM` | `double` | 默认图标宽度和高度 |
|
||
| `BorderRadiusSM` | `CornerRadius` | 默认圆角半径 |
|
||
| `EnableMotion` | `bool` | 全局动画开关，控制 `IsMotionEnabled` 的默认值 |
|
||
|
||
---
|
||
|
||
## Token 对外观的影响
|
||
|
||
### 交互状态与 Token 映射
|
||
|
||
IconButton 通过 `IconBrush` 属性在不同状态下自动切换图标颜色：
|
||
|
||
| 状态 | IconBrush 来源 | Background | 说明 |
|
||
|---|---|---|---|
|
||
| 正常 | `ColorIcon` | 透明 | 默认状态，使用主题图标色 |
|
||
| 悬浮（`:pointerover`） | `ColorIconHover` | 透明 | 鼠标悬浮时图标颜色加深 |
|
||
| 按下（`:pressed`） | `ColorText` | 透明 | 按压时使用正文色，反馈更强 |
|
||
| 禁用（`:disabled`） | `ColorTextDisabled` | 透明 | 灰色调，表示不可交互 |
|
||
|
||
### 尺寸与 Token 映射
|
||
|
||
| 属性 | Token 来源 | 说明 |
|
||
|---|---|---|
|
||
| `IconWidth` | `SharedToken.IconSizeSM` | 默认图标宽度（通常为 12px） |
|
||
| `IconHeight` | `SharedToken.IconSizeSM` | 默认图标高度（通常为 12px） |
|
||
| `CornerRadius` | `SharedToken.BorderRadiusSM` | 默认圆角半径 |
|
||
|
||
### 暗色主题适配
|
||
|
||
IconButton 的颜色完全由 SharedToken 驱动。当主题切换到暗色模式时：
|
||
- `ColorIcon`、`ColorIconHover`、`ColorText`、`ColorTextDisabled` 等 Token 会由暗色主题算法自动重新计算
|
||
- IconButton 无需额外适配，自动跟随主题变化
|
||
|
||
---
|
||
|
||
## 与 ButtonToken 的关系
|
||
|
||
> **注意**：虽然 IconButton 注册了 `ButtonToken` 作用域，但 `ButtonToken` 中的大部分 Token（如 `PrimaryColor`、`DefaultBg`、`DefaultBorderColor`、`Padding`、`ContentFontSize` 等）对 IconButton **没有直接影响**。IconButton 的视觉表现完全由 `IconBrush` 和全局 SharedToken 的图标色系驱动。
|
||
>
|
||
> 如果需要为 IconButton 添加更丰富的视觉变体（如带背景色的 IconButton），建议通过 Style 覆盖 `Background` 属性并引用 `SharedToken`，而非直接引用 `ButtonToken` 的颜色 Token。
|
||
|