Skip to main content

Timeline

<ui5-timeline> | Since 0.8.0

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.

Basic Sample​

Properties​

layout​

DescriptionDefines the items orientation.
Type"Vertical" | "Horizontal"
Default"Vertical"
Since1.0.0-rc.15

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.2.0

loading​

DescriptionDefines if the component should display a loading indicator over the Timeline.
Typeboolean
Defaultfalse
Since2.7.0

loadingDelay​

DescriptionDefines the delay in milliseconds, after which the loading indicator will show up for this component.
Typenumber
Default1000

growing​

DescriptionDefines whether the Timeline will have growing capability either by pressing a "More" button, or via user scroll. In both cases a load-more event is fired.
Available options:
Button - Displays a button at the end of the Timeline, which when pressed triggers the load-more event.
Scroll -Triggers the load-more event when the user scrolls to the end of the Timeline.
None (default) - The growing functionality is off.
Type"Button" | "Scroll" | "None"
Default"None"
Since2.7.0

Slots​

default​

DescriptionDetermines the content of the ui5-timeline.
TypeArray<ITimelineItem>

Events​

load-more​

DescriptionFired when the user presses the More button or scrolls to the Timeline's end.
Note: The event will be fired if growing is set to Button or Scroll.
TypeCustomEvent
Since2.7.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Horizontal layout​

Timeline with State​

Timeline in Card​

Timeline with Groups​

Timeline with Growing​