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

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

Alternating timeline

The timeline can display the events on alternating sides.

Eat
Code
Sleep
Repeat

Цвет

The TimelineDot can appear in different colors.

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>

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

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

Ниже находится пример кастомизации компонента. Вы можете узнать об этом больше в документации по переопределению свойств.

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!