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"}}