mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-19 23:30:44 +08:00
chinboy
128 lines
5.1 KiB
Markdown
128 lines
5.1 KiB
Markdown
# TabControl Design Token
|
||
|
||
TabControl 控件家族使用 `TabControlToken`（Token ID: `"TabControl"`）作为组件级 Design Token，所有视觉属性均从全局 `SharedToken` 派生。TabControl 和 TabStrip 系列共享同一套 Token。
|
||
|
||
---
|
||
|
||
## Token 资源访问方式
|
||
|
||
在 AXAML 中使用组件级 Token：
|
||
|
||
```xml
|
||
{atom:TabControlTokenResource InkBarColor}
|
||
{atom:TabControlTokenResource CardBg}
|
||
{atom:TabControlTokenResource ItemColor}
|
||
```
|
||
|
||
在 AXAML 中使用全局共享 Token：
|
||
|
||
```xml
|
||
{atom:SharedTokenResource ColorPrimary}
|
||
{atom:SharedTokenResource ColorBorderSecondary}
|
||
```
|
||
|
||
---
|
||
|
||
## 组件级 Token 一览
|
||
|
||
### 卡片式 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `CardBg` | `Color` | `SharedToken.ColorFillAlter` | 卡片标签页背景色 |
|
||
| `CardSize` | `double` | `SharedToken.ControlHeightLG` | 卡片标签页大小 |
|
||
| `CardPadding` | `Thickness` | 基于 `UniformlyPadding` 和 `FontSize` | 卡片标签页中号内间距 |
|
||
| `CardPaddingSM` | `Thickness` | 基于 `UniformlyPaddingXXS` | 卡片标签页小号内间距 |
|
||
| `CardPaddingLG` | `Thickness` | 基于 `UniformlyPaddingXS` | 卡片标签页大号内间距 |
|
||
| `CardGutter` | `double` | `SharedToken.UniformlyMarginXXS / 2` | 卡片标签间距 |
|
||
|
||
### 字体 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `TitleFontSize` | `double` | `SharedToken.FontSize` | 标签标题字号（中号） |
|
||
| `TitleFontSizeLG` | `double` | `SharedToken.FontSizeLG` | 标签标题字号（大号） |
|
||
| `TitleFontSizeSM` | `double` | `SharedToken.FontSize` | 标签标题字号（小号） |
|
||
|
||
### 指示器 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `InkBarColor` | `Color` | `SharedToken.ColorPrimary` | 线条式选中指示器颜色（主色调） |
|
||
|
||
### 间距与布局 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `HorizontalItemGutter` | `double` | 固定 `32` | 横向标签间距 |
|
||
| `HorizontalItemMargin` | `Thickness` | `Thickness(0)` | 横向标签外间距 |
|
||
| `HorizontalItemPadding` | `Thickness` | 基于 `UniformlyPaddingSM` | 横向标签中号内间距 |
|
||
| `HorizontalItemPaddingSM` | `Thickness` | 基于 `UniformlyPaddingXS` | 横向标签小号内间距 |
|
||
| `HorizontalItemPaddingLG` | `Thickness` | 基于 `UniformlyPadding` | 横向标签大号内间距 |
|
||
| `HorizontalMargin` | `Thickness` | 基于 `UniformlyMargin` | 横向标签页外间距 |
|
||
| `VerticalItemGutter` | `double` | `SharedToken.UniformlyMargin` | 纵向标签间距 |
|
||
| `VerticalItemPadding` | `Thickness` | 基于 `UniformlyPaddingXS` | 纵向标签内间距 |
|
||
| `TabAndContentGutter` | `double` | `SharedToken.UniformlyMarginSM` | 标签栏与内容区域间距 |
|
||
|
||
### 颜色 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `ItemColor` | `Color` | `SharedToken.ColorText` | 标签默认文本颜色 |
|
||
| `ItemHoverColor` | `Color` | `SharedToken.ColorPrimaryHover` | 标签悬浮态文本颜色 |
|
||
| `ItemSelectedColor` | `Color` | `SharedToken.ColorPrimary` | 标签选中态文本颜色 |
|
||
|
||
### 图标与按钮 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `ItemIconMargin` | `Thickness` | 基于 `UniformlyMarginSM` | 标签图标外边距 |
|
||
| `CloseIconMargin` | `Thickness` | 基于 `UniformlyMarginXXS` | 关闭按钮外边距 |
|
||
| `AddTabButtonMarginHorizontal` | `Thickness` | 基于 `UniformlyMarginXXS` | 水平添加按钮外边距 |
|
||
| `AddTabButtonMarginVertical` | `Thickness` | 基于 `UniformlyMarginXXS` | 垂直添加按钮外边距 |
|
||
|
||
### 滚动相关 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `MenuIndicatorPaddingHorizontal` | `Thickness` | 基于 `UniformlyPaddingXS` | 水平溢出菜单指示器间距 |
|
||
| `MenuIndicatorPaddingVertical` | `Thickness` | 基于 `UniformlyPaddingXS` | 垂直溢出菜单指示器间距 |
|
||
| `MenuEdgeThickness` | `double` | 固定 `20` | 滚动边缘检测厚度 |
|
||
|
||
---
|
||
|
||
## Token 对外观的具体影响
|
||
|
||
### 状态与颜色映射
|
||
|
||
| 状态 | 标签文本色 | 图标色 |
|
||
|---|---|---|
|
||
| **默认** | `ItemColor`（`ColorText`） | `ItemColor` |
|
||
| **悬浮** | `ItemHoverColor`（`ColorPrimaryHover`） | `ItemHoverColor` |
|
||
| **选中** | `ItemSelectedColor`（`ColorPrimary`） | `ItemSelectedColor` |
|
||
| **禁用** | `ColorTextDisabled` | `ColorTextDisabled` |
|
||
|
||
### 尺寸与 Token 映射
|
||
|
||
| 尺寸 | 标题字号 | 横向标签内间距 | 卡片内间距 |
|
||
|---|---|---|---|
|
||
| `Small` | `TitleFontSizeSM` | `HorizontalItemPaddingSM` | `CardPaddingSM` |
|
||
| `Middle` | `TitleFontSize` | `HorizontalItemPadding` | `CardPadding` |
|
||
| `Large` | `TitleFontSizeLG` | `HorizontalItemPaddingLG` | `CardPaddingLG` |
|
||
|
||
---
|
||
|
||
## 主题中使用的全局 SharedToken
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `ColorPrimary` | 选中态文本色、指示器颜色 |
|
||
| `ColorPrimaryHover` | 悬浮态文本色 |
|
||
| `ColorText` | 默认态文本色 |
|
||
| `ColorTextDisabled` | 禁用态文本色 |
|
||
| `ColorFillAlter` | 卡片标签背景色 |
|
||
| `ColorBorderSecondary` | 标签栏分割线颜色 |
|
||
| `BorderThickness` | 分割线厚度 |
|
||
| `EnableMotion` | 全局动画开关 |
|
||
| `IconSizeSM` | 关闭按钮图标尺寸 |
|