Timeline
Visually display timeline.
Basic usage
Timeline can be split into multiple activities. Timestamps are important features that distinguish them from other components. Note the difference with Steps.
export function TimelineBasic() { return ( <ElTimeline> {activities.map((activity) => ( <ElTimelineItem key={activity.timestamp} timestamp={activity.timestamp}> {activity.content} </ElTimelineItem> ))} </ElTimeline> ); } Mode 2.13.1
Use mode to control the relative position of timeline and content.
After 2.13.1 , el-timeline explicitly sets padding styles. If you have overridden padding styles of ul tag in your project, please check to ensure the layout is correct.
export function TimelineMode() { const [mode, setMode] = useState<TimelineMode>("start"); return ( <div> <ElRadioGroup type="button" value={mode} onChange={(value) => setMode(value as TimelineMode)} > <ElRadio value="start">start</ElRadio> <ElRadio value="alternate">alternate</ElRadio> <ElRadio value="alternate-reverse">alternate-reverse</ElRadio> <ElRadio value="end">end</ElRadio> </ElRadioGroup> <ElTimeline mode={mode} style={timelineSpacing}> {activities.map((activity) => ( <ElTimelineItem key={activity.timestamp} timestamp={activity.timestamp}> {activity.content} </ElTimelineItem> ))} </ElTimeline> </div> ); } Custom node
Size, color, and icons can be customized in node.
Custom icon
2018-04-12 20:46
Custom color
2018-04-03 20:46
Custom size
2018-04-03 20:46
Custom hollow
2018-04-03 20:46
Default node
2018-04-03 20:46
export function TimelineCustomNode() { return ( <ElTimeline> {customActivities.map((activity) => ( <ElTimelineItem key={activity.content} timestamp={activity.timestamp} icon={activity.icon} type={activity.type} color={activity.color} size={activity.size} hollow={activity.hollow} > {activity.content} </ElTimelineItem> ))} </ElTimeline> ); } Custom timestamp
Timestamp can be placed on top of content when content is too high.
2018/4/12
Update Github template Tom committed 2018/4/12 20:46
2018/4/3
Update Github template Tom committed 2018/4/3 20:46
2018/4/2
Update Github template Tom committed 2018/4/2 20:46
export function TimelineCustomTimestamp() { return ( <ElTimeline> {[ { timestamp: "2018/4/12", name: "Tom committed 2018/4/12 20:46" }, { timestamp: "2018/4/3", name: "Tom committed 2018/4/3 20:46" }, { timestamp: "2018/4/2", name: "Tom committed 2018/4/2 20:46" }, ].map((item) => ( <ElTimelineItem key={item.timestamp} timestamp={item.timestamp} placement="top"> <ElCard> <h4 style={cardTitle}>Update Github template</h4> <p style={cardBody}>{item.name}</p> </ElCard> </ElTimelineItem> ))} </ElTimeline> ); } Vertically centered
Timeline-Item is centered vertically.
2018/4/12
Update Github template Tom committed 2018/4/12 20:46
2018/4/3
Update Github template Tom committed 2018/4/3 20:46
export function TimelineCenter() { return ( <ElTimeline> <ElTimelineItem center timestamp="2018/4/12" placement="top"> <ElCard> <h4 style={cardTitle}>Update Github template</h4> <p style={cardBody}>Tom committed 2018/4/12 20:46</p> </ElCard> </ElTimelineItem> <ElTimelineItem timestamp="2018/4/3" placement="top"> <ElCard> <h4 style={cardTitle}>Update Github template</h4> <p style={cardBody}>Tom committed 2018/4/3 20:46</p> </ElCard> </ElTimelineItem> <ElTimelineItem center timestamp="2018/4/2" placement="top"> Event start </ElTimelineItem> <ElTimelineItem timestamp="2018/4/2" placement="top"> Event end </ElTimelineItem> </ElTimeline> ); } Reverse 2.11.9
Use the reverse property to control the order of the nodes.
export function TimelineReverse() { const [reverse, setReverse] = useState(true); return ( <div> <ElSwitch checked={reverse} activeText="reverse" onCheckedChange={setReverse} /> <ElTimeline reverse={reverse} style={{ marginTop: 8 }}> {activities.map((activity) => ( <ElTimelineItem key={activity.timestamp} timestamp={activity.timestamp}> {activity.content} </ElTimelineItem> ))} </ElTimeline> </div> ); } Timeline API
Timeline Attributes
Name Description Type Default reverse 2.11.9 whether reverse order booleanfalse mode 2.13.1 relative position of timeline and content enumstart
Timeline Slots
Name Description Subtags default customize default content for timeline Timeline-Item
Timeline-Item API
Timeline-Item Attributes
Name Description Type Default timestamp timestamp content string'' hide-timestamp whether to show timestamp booleanfalse center whether vertically centered booleanfalse placement position of timestamp enumbottom type node type enum'' color background color of node string'' size node size enumnormal icon icon component stringComponent— hollow icon is hollow booleanfalse
Timeline-Item Slots
Name Description default customize default content for timeline item dot customize defined node for timeline item
