跳转到内容

Timeline 时间轴

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

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

基础的时间轴

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

  • Eat
  • Code
  • Sleep

向右对齐的时间线

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

⚠️ Missing demo `pages/components/timeline/RightAlignedTimeline.js` ⚠️

交替的时间轴

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

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