Linha do tempo

A linha do tempo exibe uma lista de eventos em ordem cronológica.

Observação: Este componente não está documentado nas diretrizes do Material Design, mas o Material-UI o suporta.

Linha do tempo básica

Uma linha do tempo básica mostrando a lista de eventos.

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

Linha do tempo alternada

A linha do tempo pode exibir os eventos alternando os lados.

Eat
Code
Sleep
Repeat

Cor

O TimelineDot pode aparecer em cores diferentes.

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>

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

Press Enter to start editing

Delineado

Eat
Code
Sleep
Repeat

Conteúdo oposto

A linha do tempo pode exibir conteúdo nos lados opostos.

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

Linha do tempo customizada

Aqui está um exemplo de customização do componente. You can learn more about this in the overrides documentation page.

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!