mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-29 07:16:33 +08:00
124 lines
4.1 KiB
Markdown
124 lines
4.1 KiB
Markdown
# Tour Design Token
|
||
|
||
Tour 控件使用 `TourToken`（Token ID: `"Tour"`）作为组件级 Design Token，所有视觉属性均从全局 `SharedToken` 派生，不硬编码任何具体值。
|
||
|
||
---
|
||
|
||
## Token 资源访问方式
|
||
|
||
在 AXAML 中使用组件级 Token：
|
||
|
||
```xml
|
||
{atom:TourTokenResource CloseBtnSize}
|
||
{atom:TourTokenResource PrimaryPrevBtnBg}
|
||
{atom:TourTokenResource TourBorderRadius}
|
||
```
|
||
|
||
在 AXAML 中使用全局共享 Token：
|
||
|
||
```xml
|
||
{atom:SharedTokenResource ColorPrimary}
|
||
{atom:SharedTokenResource ColorBgElevated}
|
||
{atom:SharedTokenResource ColorBgMask}
|
||
```
|
||
|
||
---
|
||
|
||
## 组件级 Token 一览
|
||
|
||
以下是 `TourToken` 定义的全部组件级 Token，按功能分组说明。
|
||
|
||
### 外观 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `CloseBtnSize` | `double` | `SharedToken.FontSize * SharedToken.RelativeLineHeight` | 关闭按钮尺寸（宽高） |
|
||
| `HeaderColor` | `Color` | `SharedToken.ColorTextHeading` | 标题文字颜色 |
|
||
| `TourBorderRadius` | `CornerRadius` | `SharedToken.BorderRadiusLG` | Tour 气泡卡片的圆角半径 |
|
||
|
||
### 尺寸 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `TourViewMinWidth` | `double` | 固定 `200` | Tour 内容视图（TourStepsView）最小宽度 |
|
||
| `TourViewMinHeight` | `double` | 固定 `120` | Tour 内容视图（TourStepsView）最小高度 |
|
||
| `IndicatorSize` | `double` | 固定 `6` | 默认圆点指示器尺寸 |
|
||
| `PopupMarginToAnchor` | `double` | `SharedToken.SpacingXXS` | Popup 与目标控件的默认间距 |
|
||
|
||
### Primary 风格按钮 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `PrimaryPrevBtnBg` | `Color` | `SharedToken.ColorTextLightSolid` 透明度 15% | Primary 模式下"上一步"按钮背景色 |
|
||
| `PrimaryNextBtnHoverBg` | `Color` | `ColorUtils.OnBackground(SharedToken.ColorBgTextHover, SharedToken.ColorWhite)` | Primary 模式下"下一步"按钮悬浮背景色 |
|
||
|
||
---
|
||
|
||
## 主题中使用的全局 SharedToken
|
||
|
||
除组件级 Token 外，Tour 的 ControlTheme 还直接引用了以下全局 `SharedToken`：
|
||
|
||
### 颜色相关
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `ColorPrimary` | Primary 风格下 ArrowDecoratedBox 背景色 |
|
||
| `ColorBgElevated` | Default 风格下 ArrowDecoratedBox 背景色 |
|
||
| `ColorBgMask` | Tour 遮罩层默认颜色 |
|
||
| `ColorTextLightSolid` | Primary 风格下文字颜色、关闭按钮图标颜色 |
|
||
| `ColorTextHeading` | Default 风格下标题颜色（通过 `HeaderColor` Token） |
|
||
| `ColorFill` | 默认圆点指示器非活跃颜色 |
|
||
| `ColorWhite` | Primary 风格下导航按钮前景色 |
|
||
|
||
### 间距相关
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `SpacingXS` | TourStep 内部垂直间距、TourStepsView 操作按钮间距、导航栏水平间距 |
|
||
| `SpacingXXS` | TourStepsView 内容与导航栏间距、圆点指示器项间距 |
|
||
| `PaddingXXS` | TourStepsView 整体内间距 |
|
||
|
||
### 字体相关
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `FontWeightStrong` | 步骤标题字体粗细 |
|
||
| `IconSize` | 关闭按钮图标尺寸 |
|
||
|
||
### 阴影相关
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `BoxShadowsTertiary` | Tour Popup 的投影阴影 |
|
||
|
||
### 动画相关
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `EnableMotion` | Tour 默认动画开关 |
|
||
|
||
---
|
||
|
||
## Token 对外观的具体影响
|
||
|
||
### 风格类型与 Token 映射
|
||
|
||
| 风格 | ArrowDecoratedBox 背景 | 文字颜色 | 标题颜色 | 上一步按钮背景 | 下一步/完成按钮背景 |
|
||
|---|---|---|---|---|---|
|
||
| **Default** | `ColorBgElevated` | 默认前景色 | `HeaderColor`（`ColorTextHeading`） | 标准 Button | 标准 Primary Button |
|
||
| **Primary** | `ColorPrimary` | `ColorTextLightSolid` | `ColorTextLightSolid` | `PrimaryPrevBtnBg` | `ColorWhite` + `ColorPrimary` 前景 |
|
||
|
||
### 指示器与 Token 映射
|
||
|
||
| 风格 | 非活跃圆点 | 活跃圆点 |
|
||
|---|---|---|
|
||
| **Default** | `ColorFill` | `ColorPrimary` |
|
||
| **Primary** | `PrimaryPrevBtnBg` | `ColorTextLightSolid` |
|
||
|
||
### 导航按钮悬浮态
|
||
|
||
| 风格 | 上一步悬浮 | 下一步/完成悬浮 |
|
||
|---|---|---|
|
||
| **Default** | 标准 Button hover | 标准 Primary Button hover |
|
||
| **Primary** | `PrimaryPrevBtnBg` + 透明边框 | `PrimaryNextBtnHoverBg` |
|