mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-29 07:16:33 +08:00
122 lines
4.4 KiB
Markdown
122 lines
4.4 KiB
Markdown
# Expander Design Token
|
||
|
||
Expander 使用 `ExpanderToken`（Token ID: `"Expander"`）作为组件级 Design Token。所有 Token 值均从全局 `SharedToken` 派生，不硬编码任何具体值。
|
||
|
||
---
|
||
|
||
## Token 资源访问方式
|
||
|
||
在 AXAML 中使用组件级 Token：
|
||
|
||
```xml
|
||
{atom:ExpanderTokenResource HeaderPadding}
|
||
{atom:ExpanderTokenResource ContentPadding}
|
||
{atom:ExpanderTokenResource HeaderBg}
|
||
{atom:ExpanderTokenResource ContentBg}
|
||
```
|
||
|
||
在 AXAML 中使用全局共享 Token：
|
||
|
||
```xml
|
||
{atom:SharedTokenResource ColorBorder}
|
||
{atom:SharedTokenResource ColorFillAlter}
|
||
{atom:SharedTokenResource ColorTextHeading}
|
||
```
|
||
|
||
---
|
||
|
||
## 组件级 Token 一览
|
||
|
||
以下是 `ExpanderToken` 定义的全部组件级 Token。
|
||
|
||
### 头部间距 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `HeaderPadding` | `Thickness` | `(UniformlyPadding, UniformlyPaddingSM)` | Middle 尺寸头部内边距 |
|
||
| `HeaderPaddingSM` | `Thickness` | `(UniformlyPaddingSM, UniformlyPaddingXS)` | Small 尺寸头部内边距 |
|
||
| `HeaderPaddingLG` | `Thickness` | `(UniformlyPaddingLG, UniformlyPadding)` | Large 尺寸头部内边距 |
|
||
|
||
### 内容间距 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `ContentPadding` | `Thickness` | `(16, UniformlyPadding)` | Middle 尺寸内容内边距 |
|
||
| `ContentPaddingSM` | `Thickness` | `SharedToken.PaddingSM` | Small 尺寸内容内边距 |
|
||
| `ContentPaddingLG` | `Thickness` | `SharedToken.PaddingLG` | Large 尺寸内容内边距 |
|
||
|
||
### 背景色 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `HeaderBg` | `Color` | `SharedToken.ColorFillAlter` | 头部背景色（淡灰色） |
|
||
| `ContentBg` | `Color` | `SharedToken.ColorBgContainer` | 内容区域背景色（白色） |
|
||
|
||
### 布局 Token
|
||
|
||
| Token 名 | 类型 | 来源 | 说明 |
|
||
|---|---|---|---|
|
||
| `ExpanderBorderRadius` | `CornerRadius` | `SharedToken.BorderRadiusLG` | 外层边框圆角 |
|
||
| `LeftExpandButtonHMargin` | `Thickness` | `(0, 0, UniformlyMarginSM, 0)` | 图标在左侧时的右边距（水平方向） |
|
||
| `RightExpandButtonHMargin` | `Thickness` | `(UniformlyMarginSM, 0, 0, 0)` | 图标在右侧时的左边距（水平方向） |
|
||
| `LeftExpandButtonVMargin` | `Thickness` | `(0, 0, 0, UniformlyMarginSM)` | 图标在左侧时的下边距（垂直方向） |
|
||
| `RightExpandButtonVMargin` | `Thickness` | `(0, UniformlyMarginSM, 0, 0)` | 图标在右侧时的上边距（垂直方向） |
|
||
|
||
---
|
||
|
||
## 主题中使用的全局 SharedToken
|
||
|
||
除组件级 Token 外，Expander 的 ControlTheme 还直接引用了以下全局 `SharedToken`：
|
||
|
||
### 颜色 Token
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `ColorBorder` | 外层边框颜色、展开时头部分隔线颜色 |
|
||
| `ColorFillAlter` | 头部默认背景色（通过 `HeaderBg` Token 间接引用） |
|
||
| `ColorBgContainer` | 内容区域背景色（通过 `ContentBg` Token 间接引用） |
|
||
| `ColorTextHeading` | 头部标题文字颜色 |
|
||
| `ColorTextDisabled` | 禁用状态文字颜色 |
|
||
|
||
### 字号 Token
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `FontSizeLG` | Large 尺寸头部字号 |
|
||
| `FontSize` | Middle / Small 尺寸头部字号 |
|
||
| `FontHeightLG` | Large 尺寸行高 |
|
||
| `FontHeight` | Middle / Small 尺寸行高 |
|
||
| `IconSizeSM` | 展开图标尺寸 |
|
||
|
||
### 其他 Token
|
||
|
||
| Token 资源键 | 使用场景 |
|
||
|---|---|
|
||
| `BorderThickness` | 外层边框粗细 |
|
||
| `MotionDurationSlow` | 展开/收起动画时长 |
|
||
| `EnableMotion` | 全局动画开关 |
|
||
|
||
---
|
||
|
||
## Token 对外观的具体影响
|
||
|
||
### 尺寸与 Token 映射
|
||
|
||
| 尺寸 | 头部间距 | 内容间距 | 字号 / 行高 |
|
||
|---|---|---|---|
|
||
| `Large` | `HeaderPaddingLG` | `ContentPaddingLG` | `FontSizeLG` / `FontHeightLG` |
|
||
| `Middle` | `HeaderPadding` | `ContentPadding` | `FontSize` / `FontHeight` |
|
||
| `Small` | `HeaderPaddingSM` | `ContentPaddingSM` | `FontSize` / `FontHeight` |
|
||
|
||
### 风格与 Token 映射
|
||
|
||
| 风格 | 外边框 | 头部背景 | 内容背景 | 头部分隔线 |
|
||
|---|---|---|---|---|
|
||
| 默认 | `BorderThickness` + `ColorBorder` | `HeaderBg` | `ContentBg` | `ColorBorder` |
|
||
| 无边框 | 无 | `HeaderBg` | `HeaderBg`（同头部色） | 无 |
|
||
| 幽灵 | 无 | `ContentBg`（透明效果） | `ContentBg` | 无 |
|
||
|
||
### 自定义间距优先级
|
||
|
||
当用户设置 `HeaderPadding` 或 `ContentPadding` 属性时，对应的伬类（`:custom-header-padding` / `:custom-content-padding`）会被激活，此时用户指定的值优先于 Token 控制的尺寸映射。
|