Timeline Design Token

Timeline 控件使用 TimelineToken（Token ID: "Timeline"）作为组件级 Design Token，所有视觉属性均从全局 SharedToken 派生，不硬编码任何具体值。

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:TimelineTokenResource IndicatorTailColor}
{atom:TimelineTokenResource IndicatorTailWidth}
{atom:TimelineTokenResource ItemPaddingBottom}
{atom:TimelineTokenResource IndicatorSize}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ColorBorder}
{atom:SharedTokenResource ColorBgContainer}
{atom:SharedTokenResource RelativeLineHeight}

组件级 Token 一览

以下是 TimelineToken 定义的全部组件级 Token。

尾线 Token

Token 名	类型	来源	说明
`IndicatorTailColor`	`Color`	`SharedToken.ColorSplit`	连接相邻节点的尾线颜色
`IndicatorTailWidth`	`double`	`SharedToken.LineWidthBold`	尾线宽度

指示器 Token

Token 名	类型	来源	说明
`IndicatorSize`	`double`	`SharedToken.SizeMS`	指示器区域的整体尺寸
`IndicatorDotSize`	`double`	固定 `8`	指示器内置空心圆点的直径
`IndicatorDotBorderWidth`	`double`	`SharedToken.LineWidth * 3`	空心圆点的边框宽度

间距 Token

Token 名	类型	来源	说明
`ItemPaddingBottom`	`Thickness`	`Thickness(0, 0, 0, SharedToken.UniformlyPadding * 1.25)`	节点内容的下方内间距
`ItemPaddingBottomLG`	`Thickness`	`ItemPaddingBottom * 2`	待办节点前节点的加大下方内间距
`LastItemContentMinHeight`	`double`	`SharedToken.ControlHeightLG * 1.2`	最后一个节点内容区域的最小高度

指示器边距 Token

Token 名	类型	来源	说明
`IndicatorLeftModeMargin`	`Thickness`	`Thickness(0, 0, SharedToken.UniformlyMargin, 0)`	左对齐模式下指示器的外边距（右侧）
`IndicatorRightModeMargin`	`Thickness`	`Thickness(SharedToken.UniformlyMargin, 0, 0, 0)`	右对齐模式下指示器的外边距（左侧）
`IndicatorMiddleModeMargin`	`Thickness`	`Thickness(SharedToken.UniformlyMargin, 0)`	居中模式（Alternate/Label 布局）下指示器的外边距（两侧）

主题中使用的全局 SharedToken

除组件级 Token 外，Timeline 的 ControlTheme 还直接引用了以下全局 SharedToken：

Token 资源键	使用场景
`ColorPrimary`	默认指示器颜色（空心圆点和图标的默认填充色）
`ColorBorder`	Timeline 容器边框颜色
`ColorBgContainer`	Timeline 容器背景色
`RelativeLineHeight`	指示器最小高度的行高比例因子
`IconSizeXS`	（通过 `IndicatorSize` 间接使用）小图标尺寸参考

Token 对外观的具体影响

指示器渲染

元素	Token 映射
空心圆点	边框色 = `IndicatorColor`（默认 `ColorPrimary`），边框宽 = `IndicatorDotBorderWidth`，直径 = `IndicatorDotSize`
自定义图标	填充色 = `IndicatorColor`（默认 `ColorPrimary`），尺寸 = `IndicatorSize` × `IndicatorSize`
尾线	颜色 = `IndicatorTailColor`，宽度 = `IndicatorTailWidth`

节点间距

场景	间距 Token
普通节点	`ItemPaddingBottom`
待办节点前的节点（非 Reverse）	`ItemPaddingBottomLG`（加大间距，与幽灵节点拉开距离）
待办节点自身（Reverse 下）	`ItemPaddingBottomLG`（Reverse 模式下待办节点自身加大间距）

布局模式与指示器边距

布局模式	指示器边距 Token
Left（无标签）	`IndicatorLeftModeMargin`（指示器右侧留间距）
Right（无标签）	`IndicatorRightModeMargin`（指示器左侧留间距）
Alternate / 标签布局	`IndicatorMiddleModeMargin`（指示器两侧留间距）

4.0 KiB Raw Permalink Blame History Unescape Escape