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