时间轴

垂直展示的时间流信息。

何时使用

当有一系列信息需按时间排列时，可正序和倒序。
需要有一条时间轴进行视觉上的串联时。

代码演示

API

通用属性参考：通用属性

Timeline

参数	说明	类型	默认值	全局配置
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0
items	选项配置	Items[]	-	×
mode	通过设置 `mode` 可以改变时间轴和内容的相对位置	`start` \| `alternate` \| `end`	`start`	×
orientation	设置时间轴的方向	`vertical` \| `horizontal`	`vertical`	×
~~pending~~	指定最后一个幽灵节点是否存在或内容，请使用 `item.loading` 代替	ReactNode	false	×
~~pendingDot~~	当最后一个幽灵节点存在時，指定其时间图点，请使用 `item.icon` 代替	ReactNode	<LoadingOutlined />	×
reverse	节点排序	boolean	false	×
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0
titleSpan	设置标题占比空间，为到 dot 中心点距离原生说明图片	number \| string	12	×
variant	设置样式变体	`filled` \| `outlined`	`outlined`	×

Items

时间轴的每一个节点。

参数	说明	类型	默认值
color	指定圆圈颜色 `blue`、`red`、`green`、`gray`，或自定义的色值	string	`blue`
content	设置内容	ReactNode	-
~~children~~	设置内容，请使用 `content` 替换	ReactNode	-
~~dot~~	自定义时间轴点，请使用 `icon` 替换	ReactNode	-
icon	自定义节点图标	ReactNode	-
~~label~~	设置标签，请使用 `title` 替换	ReactNode	-
loading	设置加载状态	boolean	false
placement	自定义节点位置	`start` \| `end`	-
~~position~~	自定义节点位置，请使用 `placement` 替换	`start` \| `end`	-
title	设置标题	ReactNode	-

Semantic DOM

Timeline

语义节点	原生说明	版本
`root`	根元素，设置时间轴容器的列表样式重置、垂直布局、点状图标、轮廓样式、交替布局等基础容器样式	—
`item`	节点元素，设置单个时间节点的相对定位、外边距、内边距、字体大小、完成状态、颜色主题、布局方向等节点基础样式	—
`itemWrapper`	节点包装元素，设置时间节点内容的包装容器样式	—
`itemIcon`	节点图标元素，设置节点头部图标的绝对定位、宽高尺寸、背景色、边框、圆角、波纹动画等图标样式	—
`itemSection`	节点区域元素，设置包含头部和内容的区域容器的Flex布局、换行、间距等布局样式	—
`itemHeader`	节点头部元素，设置包含标题和连接线的头部区域布局、对齐方式、文本方向等样式	—
`itemTitle`	节点标题元素，设置节点标题文字的字体大小、行高、颜色等文本样式	—
`itemContent`	节点内容元素，设置节点详细内容的相对定位、顶部偏移、左侧外边距、文字颜色、词汇换行等内容样式	—
`itemRail`	节点连接线元素，设置连接时间节点的轨道线条的绝对定位、顶部偏移、左侧偏移、高度、边框颜色、宽度、样式等连接线样式	—

语义说明来源: vendor/components/timeline/demo/_semantic.tsx

Timeline Items

语义节点	原生说明	版本
`root`	根元素	—
`wrapper`	节点内裹元素	—
`icon`	节点图标元素	—
`section`	节点区域元素	—
`header`	节点头部元素	—
`title`	节点标题元素	—
`content`	节点内容元素	—
`rail`	节点连接线元素	—

语义说明来源: vendor/components/timeline/demo/_semantic_items.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

令牌	类型	原生说明
`tailColor?`	`string`	轨迹颜色
`tailWidth?`	`number \| string`	轨迹宽度
`dotBorderWidth?`	`number \| string`	节点边框宽度
`dotSize?`	`number \| string`	节点大小
`dotBg?`	`string`	节点背景色
`itemPaddingBottom?`	`number`	时间项下间距

声明来源: vendor/components/timeline/style/index.ts

import type { CSSObject } from '@ant-design/cssinjs';

import { resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import { genCssVar } from '../../theme/util/genStyleUtils';

import genHorizontalStyle from './horizontal';

export interface ComponentToken {
  /**
   * @desc 轨迹颜色
   * @descEN Line color
   */
  tailColor?: string;
  /**
   * @desc 轨迹宽度
   * @descEN Line width
   */
  tailWidth?: number | string;
  /**
   * @desc 节点边框宽度
   * @descEN Border width of node
   */
  dotBorderWidth?: number | string;
  /**
   * @desc 节点大小
   * @descEN Node size
   */
  dotSize?: number | string;
  /**
   * @desc 节点背景色
   * @descEN Background color of node
   */
  dotBg?: string;
  /**
   * @desc 时间项下间距
   * @descEN Bottom padding of item
   */
  itemPaddingBottom?: number;
}

export interface TimelineToken extends FullToken<'Timeline'> {
  itemHeadSize: number;
  customHeadPaddingVertical: number;
  paddingInlineEnd: number;
}

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

参数	说明	类型	默认值
style	自定义样式	CSSProperties	-
className	自定义类名	string	-
rootClassName	添加在组件最外层的 className	string	-
autoFocus	自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效	boolean	false

安装并复现示例

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

vendor/components/timeline/Timeline.tsx
vendor/components/timeline/style/index.ts

来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。