Saltar al contenido

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

Right-aligned timeline

La línea de tiempo puede posicionarse en el lado derecho de los eventos.

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

  • Eat
  • Code
  • Sleep
  • Repeat

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!