Expander Design Token

Expander 使用 ExpanderToken（Token ID: "Expander"）作为组件级 Design Token。所有 Token 值均从全局 SharedToken 派生，不硬编码任何具体值。

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:ExpanderTokenResource HeaderPadding}
{atom:ExpanderTokenResource ContentPadding}
{atom:ExpanderTokenResource HeaderBg}
{atom:ExpanderTokenResource ContentBg}

在 AXAML 中使用全局共享 Token：

{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 控制的尺寸映射。

4.4 KiB Raw Permalink Blame History Unescape Escape