# 时间轴

- 页面: https://jiguang132.com/zh/resources/ant-design/docs/timeline
- 资源: Ant Design (https://jiguang132.com/zh/resources/ant-design.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design/docs.md

垂直展示的时间流信息。


## 何时使用 {#when-to-use}

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

## 代码演示 {#examples}


- 基本用法 · `basic`
- 变体样式 · `variant`
- 等待及排序 · `pending`

- 交替展现 · `alternate`
- 水平布局 · `horizontal`

- 自定义时间轴点 · `custom`
- 另一侧时间轴点 · `end`
- 标题 · `title`
- 标题占比 · `title-span`
- 语义化自定义 · `semantic`
- 自定义语义结构的样式和类 · `style-class`


## API

通用属性参考：[通用属性](#jguang-common-props)

### Timeline

| 参数 | 说明 | 类型 | 默认值 | 版本 | [全局配置](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  | 6.0.0 |
| items | 选项配置 | [Items](#items)[] | - |  | × |
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `start` \| `alternate` \| `end` | `start` |  | × |
| orientation | 设置时间轴的方向 | `vertical` \| `horizontal` | `vertical` |  | × |
| ~~pending~~ | 指定最后一个幽灵节点是否存在或内容，请使用 `item.loading` 代替 | ReactNode | false |  | × |
| ~~pendingDot~~ | 当最后一个幽灵节点存在時，指定其时间图点，请使用 `item.icon` 代替 | ReactNode | &lt;LoadingOutlined /&gt; |  | × |
| reverse | 节点排序 | boolean | false |  | × |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | 6.0.0 |
| titleSpan | 设置标题占比空间，为到 dot 中心点距离 [原生说明图片](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1NJISa7bpqgAAAAAR5AAAAgAerJ8AQ/original) | 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）{#design-token}

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

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

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

```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;
}
```


## 原生通用属性 {#jguang-common-props}


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

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


## 安装并复现示例

```bash
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 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt