005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
87 lines
2.0 KiB
Markdown
87 lines
2.0 KiB
Markdown
---
|
||
productId: material-ui
|
||
title: React Timeline component
|
||
components: Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent
|
||
githubLabel: 'scope: timeline'
|
||
packageName: '@mui/lab'
|
||
---
|
||
|
||
# Timeline
|
||
|
||
<p class="description">The timeline displays a list of events in chronological order.</p>
|
||
|
||
:::info
|
||
This component is not documented in the [Material Design guidelines](https://m2.material.io/), but it is available in Material UI.
|
||
:::
|
||
|
||
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
||
|
||
## Basic timeline
|
||
|
||
A basic timeline showing list of events.
|
||
|
||
{{"demo": "BasicTimeline.js"}}
|
||
|
||
## Left-positioned timeline
|
||
|
||
The main content of the timeline can be positioned on the left side relative to the time axis.
|
||
|
||
{{"demo": "LeftPositionedTimeline.js"}}
|
||
|
||
## Alternating timeline
|
||
|
||
The timeline can display the events on alternating sides.
|
||
|
||
{{"demo": "AlternateTimeline.js"}}
|
||
|
||
## Reverse Alternating timeline
|
||
|
||
The timeline can display the events on alternating sides in reverse order.
|
||
|
||
{{"demo": "AlternateReverseTimeline.js"}}
|
||
|
||
## Color
|
||
|
||
The `TimelineDot` can appear in different colors from theme palette.
|
||
|
||
{{"demo": "ColorsTimeline.js"}}
|
||
|
||
## Outlined
|
||
|
||
{{"demo": "OutlinedTimeline.js"}}
|
||
|
||
## Opposite content
|
||
|
||
The timeline can display content on opposite sides.
|
||
|
||
{{"demo": "OppositeContentTimeline.js"}}
|
||
|
||
## Customization
|
||
|
||
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"}}
|