mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-29 07:16:33 +08:00
119 lines
5.1 KiB
Markdown
119 lines
5.1 KiB
Markdown
# Segmented Design Token
|
||
|
||
Segmented 控件使用 `SegmentedToken`（Token ID: `"Segmented"`）作为组件级 Design Token，所有视觉属性均从全局 `SharedToken` 派生，不硬编码任何具体值。
|
||
|
||
---
|
||
|
||
## Token 资源访问方式
|
||
|
||
在 AXAML 中使用组件级 Token：
|
||
|
||
```xml
|
||
{atom:SegmentedTokenResource ItemColor}
|
||
{atom:SegmentedTokenResource TrackBg}
|
||
{atom:SegmentedTokenResource ItemSelectedBg}
|
||
```
|
||
|
||
在 AXAML 中使用全局共享 Token：
|
||
|
||
```xml
|
||
{atom:SharedTokenResource BorderRadius}
|
||
{atom:SharedTokenResource FontSize}
|
||
{atom:SharedTokenResource ControlHeight}
|
||
```
|
||
|
||
---
|
||
|
||
## 组件级 Token 一览
|
||
|
||
以下是 `SegmentedToken` 定义的全部组件级 Token，按功能分组说明。
|
||
|
||
### 颜色 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `ItemColor` | `Color` | `SharedToken.ColorTextLabel` | 选项文本颜色（未选中、非悬浮态） |
|
||
| `ItemHoverColor` | `Color` | `SharedToken.ColorText` | 选项悬浮态文本颜色 |
|
||
| `ItemHoverBg` | `Color` | `SharedToken.ColorFillSecondary` | 选项悬浮态背景颜色 |
|
||
| `ItemActiveBg` | `Color` | `SharedToken.ColorFill` | 选项激活态（按下）背景颜色 |
|
||
| `ItemSelectedBg` | `Color` | `SharedToken.ColorBgElevated` | 选中选项的背景颜色（色块 Thumb 的背景色） |
|
||
| `ItemSelectedColor` | `Color` | `SharedToken.ColorText` | 选中选项的文本颜色 |
|
||
| `TrackBg` | `Color` | `SharedToken.ColorBgLayout` | 容器（轨道）背景色 |
|
||
|
||
### 尺寸 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `ItemMinHeightLG` | `double` | `SharedToken.ControlHeightLG - TrackPadding * 2` | 大号选项最小高度 |
|
||
| `ItemMinHeight` | `double` | `SharedToken.ControlHeight - TrackPadding * 2` | 中号选项最小高度 |
|
||
| `ItemMinHeightSM` | `double` | `SharedToken.ControlHeightSM - TrackPadding * 2` | 小号选项最小高度 |
|
||
|
||
### 间距 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `TrackPadding` | `Thickness` | `SharedToken.LineWidthBold`（均匀四边） | 容器内间距（色块与容器边缘的间隙） |
|
||
| `SegmentedItemPadding` | `Thickness` | `SharedToken.ControlPaddingHorizontal - LineWidth`（水平方向） | 中号/大号选项的水平内间距 |
|
||
| `SegmentedItemPaddingSM` | `Thickness` | `SharedToken.ControlPaddingHorizontalSM - LineWidth`（水平方向） | 小号选项的水平内间距 |
|
||
| `SegmentedItemContentMargin` | `Thickness` | `SharedToken.UniformlyPaddingXXS`（仅左侧） | 带图标时内容文字的左边距（图标与文字之间的间距） |
|
||
|
||
---
|
||
|
||
## 主题中使用的全局 SharedToken
|
||
|
||
除组件级 Token 外，Segmented 的 ControlTheme 还直接引用了以下全局 `SharedToken`：
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `EnableMotion` | 全局动画开关（控制 `IsMotionEnabled` 的默认值） |
|
||
| `BoxShadowsTertiary` | 选中色块的阴影效果 |
|
||
| `BorderRadiusLG` / `BorderRadius` / `BorderRadiusSM` / `BorderRadiusXS` | 不同尺寸下容器和选项的圆角 |
|
||
| `FontSizeLG` / `FontSize` | 大号和中/小号选项的字体大小 |
|
||
| `IconSizeLG` / `IconSize` / `IconSizeSM` | 不同尺寸下图标的宽高 |
|
||
| `ColorTextDisabled` | 禁用选项的文本颜色 |
|
||
| `ControlHeightLG` / `ControlHeight` / `ControlHeightSM` | 用于计算选项最小高度 |
|
||
| `ControlPaddingHorizontal` / `ControlPaddingHorizontalSM` | 用于计算选项水平内间距 |
|
||
| `LineWidth` / `LineWidthBold` | 用于计算容器内间距和选项内间距偏移 |
|
||
|
||
---
|
||
|
||
## Token 对外观的具体影响
|
||
|
||
### 容器外观
|
||
|
||
| 属性 | Token 来源 |
|
||
|---|---|
|
||
| 背景色 | `TrackBg`（`ColorBgLayout`） |
|
||
| 内间距 | `TrackPadding`（`LineWidthBold`） |
|
||
| 圆角（Large） | `BorderRadiusLG`（全局 SharedToken） |
|
||
| 圆角（Middle） | `BorderRadius`（全局 SharedToken） |
|
||
| 圆角（Small） | `BorderRadiusSM`（全局 SharedToken） |
|
||
|
||
### 选中色块（Thumb）外观
|
||
|
||
| 属性 | Token 来源 |
|
||
|---|---|
|
||
| 背景色 | `ItemSelectedBg`（`ColorBgElevated`） |
|
||
| 阴影 | `BoxShadowsTertiary`（全局 SharedToken） |
|
||
| 圆角（Large） | `BorderRadius`（全局 SharedToken） |
|
||
| 圆角（Middle） | `BorderRadiusSM`（全局 SharedToken） |
|
||
| 圆角（Small） | `BorderRadiusXS`（全局 SharedToken） |
|
||
|
||
### 选项状态与 Token 映射
|
||
|
||
| 状态 | 文字颜色 Token | 背景色 Token | 图标颜色 Token |
|
||
|---|---|---|---|
|
||
| **正常（未选中）** | `ItemColor` | 透明 | `ItemColor` |
|
||
| **悬浮（未选中）** | `ItemHoverColor` | `ItemHoverBg` | `ItemHoverColor` |
|
||
| **按下（未选中）** | — | `ItemActiveBg` | `ItemSelectedColor` |
|
||
| **选中** | `ItemSelectedColor` | `ItemSelectedBg` | `ItemSelectedColor` |
|
||
| **禁用** | `ColorTextDisabled` | — | — |
|
||
|
||
### 尺寸与 Token 映射
|
||
|
||
| 尺寸 | 选项最小高度 | 选项内间距 | 字体大小 | 图标大小 | 选项圆角 |
|
||
|---|---|---|---|---|---|
|
||
| `Large` | `ItemMinHeightLG` | `SegmentedItemPadding` | `FontSizeLG` | `IconSizeLG` | `BorderRadius` |
|
||
| `Middle` | `ItemMinHeight` | `SegmentedItemPadding` | `FontSize` | `IconSize` | `BorderRadiusSM` |
|
||
| `Small` | `ItemMinHeightSM` | `SegmentedItemPaddingSM` | `FontSize` | `IconSizeSM` | `BorderRadiusXS` |
|