Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Timeline] Add left and right aligned timeline demos in docs (#34156)
* add demos * update code * Update docs/data/material/components/timeline/timeline.md Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> * Jun's review - update demos * Danilo's review - update docs Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
- Loading branch information
1 parent
04027ec
commit 0189797
Showing
7 changed files
with
266 additions
and
0 deletions.
There are no files selected for viewing
44 changes: 44 additions & 0 deletions
44
docs/data/material/components/timeline/LeftAlignedTimeline.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import * as React from 'react'; | ||
import Timeline from '@mui/lab/Timeline'; | ||
import TimelineItem from '@mui/lab/TimelineItem'; | ||
import TimelineSeparator from '@mui/lab/TimelineSeparator'; | ||
import TimelineConnector from '@mui/lab/TimelineConnector'; | ||
import TimelineContent from '@mui/lab/TimelineContent'; | ||
import TimelineDot from '@mui/lab/TimelineDot'; | ||
import TimelineOppositeContent, { | ||
timelineOppositeContentClasses, | ||
} from '@mui/lab/TimelineOppositeContent'; | ||
|
||
export default function OppositeContentTimeline() { | ||
return ( | ||
<React.Fragment> | ||
<Timeline | ||
sx={{ | ||
[`& .${timelineOppositeContentClasses.root}`]: { | ||
flex: 0.2, | ||
}, | ||
}} | ||
> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
09:30 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
<TimelineConnector /> | ||
</TimelineSeparator> | ||
<TimelineContent>Eat</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
10:00 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
</TimelineSeparator> | ||
<TimelineContent>Code</TimelineContent> | ||
</TimelineItem> | ||
</Timeline> | ||
</React.Fragment> | ||
); | ||
} |
44 changes: 44 additions & 0 deletions
44
docs/data/material/components/timeline/LeftAlignedTimeline.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import * as React from 'react'; | ||
import Timeline from '@mui/lab/Timeline'; | ||
import TimelineItem from '@mui/lab/TimelineItem'; | ||
import TimelineSeparator from '@mui/lab/TimelineSeparator'; | ||
import TimelineConnector from '@mui/lab/TimelineConnector'; | ||
import TimelineContent from '@mui/lab/TimelineContent'; | ||
import TimelineDot from '@mui/lab/TimelineDot'; | ||
import TimelineOppositeContent, { | ||
timelineOppositeContentClasses, | ||
} from '@mui/lab/TimelineOppositeContent'; | ||
|
||
export default function OppositeContentTimeline() { | ||
return ( | ||
<React.Fragment> | ||
<Timeline | ||
sx={{ | ||
[`& .${timelineOppositeContentClasses.root}`]: { | ||
flex: 0.2, | ||
}, | ||
}} | ||
> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
09:30 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
<TimelineConnector /> | ||
</TimelineSeparator> | ||
<TimelineContent>Eat</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
10:00 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
</TimelineSeparator> | ||
<TimelineContent>Code</TimelineContent> | ||
</TimelineItem> | ||
</Timeline> | ||
</React.Fragment> | ||
); | ||
} |
36 changes: 36 additions & 0 deletions
36
docs/data/material/components/timeline/NoOppositeContent.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import * as React from 'react'; | ||
import Timeline from '@mui/lab/Timeline'; | ||
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem'; | ||
import TimelineSeparator from '@mui/lab/TimelineSeparator'; | ||
import TimelineConnector from '@mui/lab/TimelineConnector'; | ||
import TimelineContent from '@mui/lab/TimelineContent'; | ||
import TimelineDot from '@mui/lab/TimelineDot'; | ||
|
||
export default function OppositeContentTimeline() { | ||
return ( | ||
<React.Fragment> | ||
<Timeline | ||
sx={{ | ||
[`& .${timelineItemClasses.root}:before`]: { | ||
flex: 0, | ||
padding: 0, | ||
}, | ||
}} | ||
> | ||
<TimelineItem> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
<TimelineConnector /> | ||
</TimelineSeparator> | ||
<TimelineContent>Eat</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
</TimelineSeparator> | ||
<TimelineContent>Code</TimelineContent> | ||
</TimelineItem> | ||
</Timeline> | ||
</React.Fragment> | ||
); | ||
} |
36 changes: 36 additions & 0 deletions
36
docs/data/material/components/timeline/NoOppositeContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import * as React from 'react'; | ||
import Timeline from '@mui/lab/Timeline'; | ||
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem'; | ||
import TimelineSeparator from '@mui/lab/TimelineSeparator'; | ||
import TimelineConnector from '@mui/lab/TimelineConnector'; | ||
import TimelineContent from '@mui/lab/TimelineContent'; | ||
import TimelineDot from '@mui/lab/TimelineDot'; | ||
|
||
export default function OppositeContentTimeline() { | ||
return ( | ||
<React.Fragment> | ||
<Timeline | ||
sx={{ | ||
[`& .${timelineItemClasses.root}:before`]: { | ||
flex: 0, | ||
padding: 0, | ||
}, | ||
}} | ||
> | ||
<TimelineItem> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
<TimelineConnector /> | ||
</TimelineSeparator> | ||
<TimelineContent>Eat</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
</TimelineSeparator> | ||
<TimelineContent>Code</TimelineContent> | ||
</TimelineItem> | ||
</Timeline> | ||
</React.Fragment> | ||
); | ||
} |
42 changes: 42 additions & 0 deletions
42
docs/data/material/components/timeline/RightAlignedTimeline.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import * as React from 'react'; | ||
import Timeline from '@mui/lab/Timeline'; | ||
import TimelineItem from '@mui/lab/TimelineItem'; | ||
import TimelineSeparator from '@mui/lab/TimelineSeparator'; | ||
import TimelineConnector from '@mui/lab/TimelineConnector'; | ||
import TimelineContent, { timelineContentClasses } from '@mui/lab/TimelineContent'; | ||
import TimelineDot from '@mui/lab/TimelineDot'; | ||
import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; | ||
|
||
export default function OppositeContentTimeline() { | ||
return ( | ||
<React.Fragment> | ||
<Timeline | ||
sx={{ | ||
[`& .${timelineContentClasses.root}`]: { | ||
flex: 0.2, | ||
}, | ||
}} | ||
> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
09:30 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
<TimelineConnector /> | ||
</TimelineSeparator> | ||
<TimelineContent>Eat</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
10:00 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
</TimelineSeparator> | ||
<TimelineContent>Code</TimelineContent> | ||
</TimelineItem> | ||
</Timeline> | ||
</React.Fragment> | ||
); | ||
} |
42 changes: 42 additions & 0 deletions
42
docs/data/material/components/timeline/RightAlignedTimeline.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import * as React from 'react'; | ||
import Timeline from '@mui/lab/Timeline'; | ||
import TimelineItem from '@mui/lab/TimelineItem'; | ||
import TimelineSeparator from '@mui/lab/TimelineSeparator'; | ||
import TimelineConnector from '@mui/lab/TimelineConnector'; | ||
import TimelineContent, { timelineContentClasses } from '@mui/lab/TimelineContent'; | ||
import TimelineDot from '@mui/lab/TimelineDot'; | ||
import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; | ||
|
||
export default function OppositeContentTimeline() { | ||
return ( | ||
<React.Fragment> | ||
<Timeline | ||
sx={{ | ||
[`& .${timelineContentClasses.root}`]: { | ||
flex: 0.2, | ||
}, | ||
}} | ||
> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
09:30 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
<TimelineConnector /> | ||
</TimelineSeparator> | ||
<TimelineContent>Eat</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineOppositeContent color="textSecondary"> | ||
10:00 am | ||
</TimelineOppositeContent> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
</TimelineSeparator> | ||
<TimelineContent>Code</TimelineContent> | ||
</TimelineItem> | ||
</Timeline> | ||
</React.Fragment> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters