跳转到内容
编辑此页面

Timeline 时间轴

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

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

基础的时间轴

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

  • Eat
  • Code
  • Sleep

Left-positioned timeline

The main content of the timeline can be positioned on the left side relative to the time axis.

  • 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>

描边

  • Eat
  • Code
  • Sleep
  • Repeat

相反的内容

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

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

定制的时间轴

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

  • 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!

API