---
url: /components/timeline.md
---
# Timeline 时间轴

垂直时间轴，按时间顺序展示一系列节点。竖向轴线与圆点居中对齐、逐节点连贯绘制；支持左右交替排列、时间戳四种位置、语义色 / 任意色圆点、图标与自定义圆点、末尾加载占位幽灵节点。

## 基础用法

节点内容写在 `eb-timeline-item` 默认插槽，`timestamp` 显示时间戳（默认在内容下方），`type` 设置语义色圆点。

## 左右交替

`mode="alternate"` 时节点按奇偶交替分布在轴两侧，配合 `label` 在对侧显示标签；`variant="filled"` 切换为实心圆点（item 同名属性可单独覆盖容器）。

## 时间戳位置 placement

`placement` 支持四种位置：`top` / `bottom` 把时间戳放在节点内容上方或下方；`start` / `end` 把时间戳移到轴的对侧（`left` 模式下在轴右侧），可同时与 `label` 共存于两侧。

## 自定义颜色与空心

`color` 支持任意色值，也接受语义色名（primary / success / warning / danger / info、blue / green / red / gray / warning，自动映射主题 token）；`hollow` 强制该节点为空心圆点（在 filled 容器中可单独回退为描边样式）。

## 图标、尺寸与自定义圆点

`icon` 传入图标名替换圆点内图标，`size="large"` 加大圆点直径；需要完全接管时使用 `#dot` 插槽。

## 加载占位

开启 `pending` 后末尾追加幽灵节点（灰色加载圆点），传字符串可自定义文案，`pendingDot` 可替换幽灵节点的圆点。

## 倒序

`reverse` 视觉上倒序展示（配合 flex 反转，常用于「最新在上」的消息流）；即使开启倒序，pending 幽灵节点仍保持在末尾。

## API