---
title: React Timeline 时间轴组件
components: Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent
---

# Timeline 时间轴

<p class="description">时间轴是一个按时间顺序来显示事件列表的组件。</p>

**请注意：**该组件不再出现在 [Material Design 指南](https://material.io/)中, 但 Material-UI 会继续支持此组件。

## 基础的时间轴

一个基本的时间轴，显示事件列表。

{{"demo": "pages/components/timeline/BasicTimeline.js"}}

## 右对齐的时间轴

时间轴的位置可以放在在事件的右侧。

{{"demo": "pages/components/timeline/RightAlignedTimeline.js"}}

## 交替的时间轴

时间轴可以交替显示在事件的两侧。

{{"demo": "pages/components/timeline/AlternateTimeline.js"}}

## Color 颜色

`TimelineDot` 可以以不同的颜色出现。

{{"demo": "pages/components/timeline/ColorsTimeline.js"}}

## 描边

{{"demo": "pages/components/timeline/OutlinedTimeline.js"}}

## Opposite content

The timeline can display content on opposite sides.

{{"demo": "pages/components/timeline/OppositeContentTimeline.js"}}

## 定制的时间轴

以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。

{{"demo": "pages/components/timeline/CustomizedTimeline.js"}}