[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>
mui · Sep 8, 2022 · 0189797 · 0189797
1 parent 04027ec
commit 0189797
Show file tree

Hide file tree

Showing 7 changed files with 266 additions and 0 deletions.
diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.js 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 (
+    <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>
+  );
+}
diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.tsx 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 (
+    <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>
+  );
+}
diff --git a/docs/data/material/components/timeline/NoOppositeContent.js 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 (
+    <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>
+  );
+}
diff --git a/docs/data/material/components/timeline/NoOppositeContent.tsx 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 (
+    <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>
+  );
+}
diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.js 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 (
+    <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>
+  );
+}
diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.tsx 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 (
+    <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>
+  );
+}
diff --git 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"}}