Timeline

v0.8.0
@ui5/webcomponents
<ui5-timeline>

Basic Timeline

MR SOF02 2.43
Online meeting
<ui5-timeline>
	<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
	<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="calendar">
		<div>MR SOF02 2.43</div>
	</ui5-timeline-item>
	<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar">
		<div>Online meeting</div>
	</ui5-timeline-item>
</ui5-timeline>
	

Overview

The ui5-timeline component shows entries (such as objects, events, or posts) in chronological order. A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Determines the content of the ui5-timeline.

TimelineItem

Overview

An entry posted on the timeline.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
icon
string
""
Defines the icon to be displayed as graphical element within the ui5-timeline-item. SAP-icons font provides numerous options.

See all the available icons in the Icon Explorer.
itemName
item-name
string
""
Defines the name of the item.
itemNameClickable
item-name-clickable
boolean
false
Defines whether the itemName is clickable.
subtitleText
subtitle-text
string
""
Defines the subtitle text of the component.
titleText
title-text
string
""
Defines the title text of the component.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Determines the description of the ui5-timeline-item.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
item-name-click
Fired when the item name is pressed either with a click/tap or by using the Enter or Space key.

Note: The event will not be fired if the item-name-clickable attribute is not set.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel