React Timeline - Soft UI
The timeline components helps you to simply create a beautiful timeline for your pages. It contains two components the TimelineList and the TimelineItem.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// Soft UI Dashboard React examples
import TimelineList from "examples/Timeline/TimelineList";
import TimelineItem from "examples/Timeline/TimelineItem";
Timeline
22 DEC 7:20 PM
design
21 DEC 11 PM
order
#1832412
21 DEC 9:34 PM
server
payments
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| title* | string | Its a prop related to TimelineList and used to set the title for the timeline, its a required prop. | |
| dark | bool | false | Its a prop related to TimelineList and used to switch between light and dark mode of the timeline. |
| children* | node | Its a prop related to TimelineList and used to pass node or content inside the TimelineList, its a required prop. | |
| color | 'primary''secondary''info''success''warning''error''dark''light' | info | Its a prop related to TimelineItem and used to set the TimelineItem color. |
| icon* | node | Its a prop related to TimelineItem and used to set the TimelineItem icon, its a required prop. | |
| title* | string | Its a prop related to TimelineItem and used to set the TimelineItem title, its a required prop. | |
| dateTime* | string | Its a prop related to TimelineItem and used to set the TimelineItem date or time, its a required prop. | |
| description | string | "" | Its a prop related to TimelineItem and used to set the TimelineItem description. |
| badges | array | [] | Its a prop related to TimelineItem and used to set the TimelineItem labels. |
| badges | array | [] | Its a prop related to TimelineItem and used to set the TimelineItem labels. |
| lastItem | bool | false | Its a prop related to TimelineItem and used to define the last item of the timeline, its helpful for removing the line when the timeline reaches to its end. |
Timeline Item
You can use the TimelineItem component without the TimelineList as well.
// Soft UI Dashboard React examples
import TimelineItem from "examples/Timeline/TimelineItem";
21 DEC 9:34 PM
server
payments