Timeline
The timeline displays a list of events in chronological order.
Note: This component is not documented in the Material Design guidelines, but Material-UI supports it.
- 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
- Eat
- Code
- Sleep
- Repeat
- 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
- 09:30 amEat
- 10:00 amCode
- 12:00 amSleep
- 9:00 amRepeat
Customization
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
- 9:30 amEat
Because you need strength
- 10:00 amCode
Because it's awesome!
- Sleep
Because you need rest
- Repeat
Because this is the life you love!
Theming
Here is an example of theming the component. You can learn more about this in the theming page and theme components page
1
Add space and style to the account
- Margin Top
- Padding Bottom
- Flexbox