UI5 Web Components
Search

Timeline

v0.8.0
@ui5/webcomponents-fiori
<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" name="John Smith" 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>

Horizontal Timeline

MR SOF02 2.43
Online meeting
 
<ui5-timeline layout="Horizontal">
	<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="John Smith" 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.

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
accessibleName
accessible-name
string
Defines the accessible ARIA name of the component.
since v1.2.0
layout
TimelineLayout
"Vertical"
Defines the items orientation.

Note: Available options are:
  • Vertical
  • Horizontal
since v1.0.0-rc.15

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.
name
string
""
Defines the name of the item, displayed before the title-text.
nameClickable
name-clickable
boolean
false
Defines if the name 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
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 name-clickable attribute is not set.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel