Línea de tiempo

La línea de tiempo muestra una lista de eventos en orden cronológico.

Nota: Este componente no está documentado en las pautas de Material Design, pero Material-UI lo soporta.

Línea de tiempo básica

Una línea de tiempo básica que muestra una 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

Línea de tiempo alternativa

La línea de tiempo puede mostrar los eventos en los lados alternos.

Eat
Code
Sleep
Repeat

Color

El TimelineDot puede aparecer en diferentes colores.

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>

Delineada

Eat
Code
Sleep
Repeat

Contenido opuesto

La línea de tiempo puede mostrar contenido en lados opuestos.

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

Línea de tiempo personalizada

He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

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!