Summary 💡
<Timeline /> component supports 3 different alignments: align: 'alternate' | 'left' | 'right'. While this is enough for most cases, I believe it could be useful to add support for override in each <TimelineItem /> with a align: 'left' | 'right' property or something similar.
Examples 🌈
import * as React from 'react';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
export default function AlternateTimeline() {
return (
<Timeline align='alternate'>
<TimelineItem align="right">
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>Eat</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>Code</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>Sleep</TimelineContent>
</TimelineItem>
<TimelineItem align='right'>
<TimelineSeparator>
<TimelineDot />
</TimelineSeparator>
<TimelineContent>Repeat</TimelineContent>
</TimelineItem>
</Timeline>
);
}
Motivation 🔦
It will allow to build an alternating timeline with grouped TimelineItem(s):
I believe that the keyword is "groups". When you build a long <Timeline /> with multiple <TimelineItem />(s) rich of contents, align='alternate' helps to reduce void space in the page, but could also lead to a disorienting UI because similar components are placed in opposite positions. The best way to solve this problem is to group similar items.
Summary 💡
<Timeline />component supports 3 different alignments:align: 'alternate' | 'left' | 'right'. While this is enough for most cases, I believe it could be useful to add support for override in each<TimelineItem />with aalign: 'left' | 'right'property or something similar.Examples 🌈
Motivation 🔦
It will allow to build an alternating timeline with grouped TimelineItem(s):
I believe that the keyword is "groups". When you build a long
<Timeline />with multiple<TimelineItem />(s) rich of contents,align='alternate'helps to reduce void space in the page, but could also lead to a disorienting UI because similar components are placed in opposite positions. The best way to solve this problem is to group similar items.