跳转到内容

🎉 Material UI v5 is out! Head to the migration guide to get started.

Timeline 时间轴

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

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

基础的时间轴

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

  • Eat
  • Code
  • Sleep

靠右对齐的时间轴

您也可以将时间轴放置在事件的右侧。

  • Eat
  • Code
  • Sleep
  • Repeat

交替的时间轴

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

  • Eat
  • Code
  • Sleep
  • Repeat

Color 颜色

TimelineDot(时间点) 可以以不同的颜色呈现。

  • Eat
  • Code
  • Sleep
  • Repeat

描边

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