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