From 5e5a4088c0539d8742a0ebdc19467bcb97e6b313 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Thu, 8 Sep 2022 12:00:11 +0530 Subject: [PATCH] [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> --- .../timeline/LeftAlignedTimeline.js | 44 +++++++++++++++++++ .../timeline/LeftAlignedTimeline.tsx | 44 +++++++++++++++++++ .../components/timeline/NoOppositeContent.js | 36 +++++++++++++++ .../components/timeline/NoOppositeContent.tsx | 36 +++++++++++++++ .../timeline/RightAlignedTimeline.js | 42 ++++++++++++++++++ .../timeline/RightAlignedTimeline.tsx | 42 ++++++++++++++++++ .../material/components/timeline/timeline.md | 22 ++++++++++ 7 files changed, 266 insertions(+) create mode 100644 docs/data/material/components/timeline/LeftAlignedTimeline.js create mode 100644 docs/data/material/components/timeline/LeftAlignedTimeline.tsx create mode 100644 docs/data/material/components/timeline/NoOppositeContent.js create mode 100644 docs/data/material/components/timeline/NoOppositeContent.tsx create mode 100644 docs/data/material/components/timeline/RightAlignedTimeline.js create mode 100644 docs/data/material/components/timeline/RightAlignedTimeline.tsx diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.js b/docs/data/material/components/timeline/LeftAlignedTimeline.js new file mode 100644 index 00000000000000..8daa4d4d97014a --- /dev/null +++ b/docs/data/material/components/timeline/LeftAlignedTimeline.js @@ -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 ( + + + + + 09:30 am + + + + + + Eat + + + + 10:00 am + + + + + Code + + + + ); +} diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.tsx b/docs/data/material/components/timeline/LeftAlignedTimeline.tsx new file mode 100644 index 00000000000000..8daa4d4d97014a --- /dev/null +++ b/docs/data/material/components/timeline/LeftAlignedTimeline.tsx @@ -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 ( + + + + + 09:30 am + + + + + + Eat + + + + 10:00 am + + + + + Code + + + + ); +} diff --git a/docs/data/material/components/timeline/NoOppositeContent.js b/docs/data/material/components/timeline/NoOppositeContent.js new file mode 100644 index 00000000000000..034b5dd6305874 --- /dev/null +++ b/docs/data/material/components/timeline/NoOppositeContent.js @@ -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 ( + + + + + + + + Eat + + + + + + Code + + + + ); +} diff --git a/docs/data/material/components/timeline/NoOppositeContent.tsx b/docs/data/material/components/timeline/NoOppositeContent.tsx new file mode 100644 index 00000000000000..034b5dd6305874 --- /dev/null +++ b/docs/data/material/components/timeline/NoOppositeContent.tsx @@ -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 ( + + + + + + + + Eat + + + + + + Code + + + + ); +} diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.js b/docs/data/material/components/timeline/RightAlignedTimeline.js new file mode 100644 index 00000000000000..6fbd295a6e2f0f --- /dev/null +++ b/docs/data/material/components/timeline/RightAlignedTimeline.js @@ -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 ( + + + + + 09:30 am + + + + + + Eat + + + + 10:00 am + + + + + Code + + + + ); +} diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.tsx b/docs/data/material/components/timeline/RightAlignedTimeline.tsx new file mode 100644 index 00000000000000..6fbd295a6e2f0f --- /dev/null +++ b/docs/data/material/components/timeline/RightAlignedTimeline.tsx @@ -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 ( + + + + + 09:30 am + + + + + + Eat + + + + 10:00 am + + + + + Code + + + + ); +} diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md index ada9b75989398d..7eb74ddbc1f6c3 100644 --- a/docs/data/material/components/timeline/timeline.md +++ b/docs/data/material/components/timeline/timeline.md @@ -54,3 +54,25 @@ Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). {{"demo": "CustomizedTimeline.js"}} + +## Alignment + +There are different ways in which a Timeline can be placed within the container. + +You can do it by overriding the styles. + +A Timeline centers itself in the container by default. + +The demos below show how to adjust the relative width of the left and right sides of a Timeline: + +### Left-aligned + +{{"demo": "LeftAlignedTimeline.js"}} + +### Right-aligned + +{{"demo": "RightAlignedTimeline.js"}} + +### Left-aligned with no opposite content + +{{"demo": "NoOppositeContent.js"}}