时间轴

时间轴以时间顺序显示一系列事件。

基本时间轴

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

吃
代码
睡

左侧定位时间轴

时间轴的主要内容可以相对于时间轴线定位在左侧。

吃
代码
睡
重复

交替时间轴

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

吃
代码
睡
重复

反向交替时间轴

时间轴可以以相反的顺序在交替的侧面显示事件。

吃
代码
睡
重复

颜色

TimelineDot 可以显示主题调色板中的不同颜色。

次要色
成功色

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

按 Enter 开始编辑