時間軸

時間軸依時間順序顯示一系列事件。

基本時間軸

一個顯示事件列表的基本時間軸。

吃
寫程式
睡覺

左側定位時間軸

時間軸的主要內容可以相對於時間軸定位在左側。

吃
寫程式
睡覺
重複

交替時間軸

時間軸可以在交替側顯示事件。

吃
寫程式
睡覺
重複

反向交替時間軸

時間軸可以在反向順序的交替側顯示事件。

吃
寫程式
睡覺
重複

顏色

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 開始編輯