Перейти к контенту

🎉 Material UI v5 is out now! Check out the announcement blog post

Timeline

The timeline displays a list of events in chronological order.

Примечание: Этот компонент не задокументирован в гайдлайнах Material Design, но Material-UI поддерживает его.

Basic timeline

A basic timeline showing list of events.

  • Eat
  • Code
  • Sleep

Right aligned timeline

The timeline can be positioned on the right side of the events.

  • Eat
  • Code
  • Sleep
  • Repeat

Alternating timeline

The timeline can display the events on alternating sides.

  • Eat
  • Code
  • Sleep
  • Repeat

Цвет

The TimelineDot can appear in different colors.

  • Eat
  • Code
  • Sleep
  • Repeat

Контурный стиль

  • Eat
  • Code
  • Sleep
  • Repeat

Opposite content

The timeline can display content on opposite sides.

  • 09:30 am

    Eat

  • 10:00 am

    Code

  • 12:00 am

    Sleep

  • 9:00 am

    Repeat

Customized timeline

Ниже находится пример кастомизации компонента. 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!