TabControl Design Token

TabControl 控件家族使用 TabControlToken（Token ID: "TabControl"）作为组件级 Design Token，所有视觉属性均从全局 SharedToken 派生。TabControl 和 TabStrip 系列共享同一套 Token。

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:TabControlTokenResource InkBarColor}
{atom:TabControlTokenResource CardBg}
{atom:TabControlTokenResource ItemColor}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ColorBorderSecondary}

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 名	类型	来源	说明
`TitleFontSize`	`double`	`SharedToken.FontSize`	标签标题字号（中号）
`TitleFontSizeLG`	`double`	`SharedToken.FontSizeLG`	标签标题字号（大号）
`TitleFontSizeSM`	`double`	`SharedToken.FontSize`	标签标题字号（小号）

Token 名	类型	来源	说明
`InkBarColor`	`Color`	`SharedToken.ColorPrimary`	线条式选中指示器颜色（主色调）

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 名	类型	来源	说明
`ItemColor`	`Color`	`SharedToken.ColorText`	标签默认文本颜色
`ItemHoverColor`	`Color`	`SharedToken.ColorPrimaryHover`	标签悬浮态文本颜色
`ItemSelectedColor`	`Color`	`SharedToken.ColorPrimary`	标签选中态文本颜色

Token 名	类型	来源	说明
`ItemIconMargin`	`Thickness`	基于 `UniformlyMarginSM`	标签图标外边距
`CloseIconMargin`	`Thickness`	基于 `UniformlyMarginXXS`	关闭按钮外边距
`AddTabButtonMarginHorizontal`	`Thickness`	基于 `UniformlyMarginXXS`	水平添加按钮外边距
`AddTabButtonMarginVertical`	`Thickness`	基于 `UniformlyMarginXXS`	垂直添加按钮外边距

Token 名	类型	来源	说明
`MenuIndicatorPaddingHorizontal`	`Thickness`	基于 `UniformlyPaddingXS`	水平溢出菜单指示器间距
`MenuIndicatorPaddingVertical`	`Thickness`	基于 `UniformlyPaddingXS`	垂直溢出菜单指示器间距
`MenuEdgeThickness`	`double`	固定 `20`	滚动边缘检测厚度

状态	标签文本色	图标色
默认	`ItemColor`（`ColorText`）	`ItemColor`
悬浮	`ItemHoverColor`（`ColorPrimaryHover`）	`ItemHoverColor`
选中	`ItemSelectedColor`（`ColorPrimary`）	`ItemSelectedColor`
禁用	`ColorTextDisabled`	`ColorTextDisabled`

尺寸	标题字号	横向标签内间距	卡片内间距
`Small`	`TitleFontSizeSM`	`HorizontalItemPaddingSM`	`CardPaddingSM`
`Middle`	`TitleFontSize`	`HorizontalItemPadding`	`CardPadding`
`Large`	`TitleFontSizeLG`	`HorizontalItemPaddingLG`	`CardPaddingLG`