Timeline 时间轴

时间轴组件按时间顺序来展示了一系列的事件。

请注意：该组件不再出现在 Material Design 指南中, 但 Material-UI 会继续支持此组件。

基础的时间轴

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

Eat
Code
Sleep

Left-positioned timeline

时间轴的主要内容可以被放置在相对时间轴的左侧。

Eat
Code
Sleep
Repeat

交替的时间轴

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

Eat
Code
Sleep
Repeat

Color 颜色

TimelineDot（时间点） 可以以不同的颜色呈现。

Secondary
Success

<Timeline position="alternate">
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="secondary" />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Secondary</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="success" />
    </TimelineSeparator>
    <TimelineContent>Success</TimelineContent>
  </TimelineItem>
</Timeline>

<Timeline position="alternate">
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="secondary" />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Secondary</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="success" />
    </TimelineSeparator>
    <TimelineContent>Success</TimelineContent>
  </TimelineItem>
</Timeline>

Press Enter to start editing

描边

Eat
Code
Sleep
Repeat

相反的内容

时间线可以在另外一侧呈现内容。

09:30 am
Eat
10:00 am
Code
12:00 am
Sleep
9:00 am
Repeat

定制的时间轴

以下是自定义组件的一个示例。 You can learn more about this in the overrides documentation page.

9:30 am
Eat
Because you need strength
10:00 am
Code
Because it's awesome!
Sleep
Because you need rest
Repeat
Because this is the life you love!