Components/Data display

ETimeline Timeline

import EUI 1.0

Examples

Alternating layout, icons and timestamp positions

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETimeline { mode: "alternate" width: Math.min(600, parent.width) model: [{ content: qsTr("Requirements confirmed"), timestamp: "2026-10-01", placement: "top", styleType: EStyle.Success }, { content: qsTr("Development complete"), timestamp: "2026-10-05", icon: EIcons.CHECK, size: "large" }, { content: qsTr("Ready to release"), timestamp: "2026-10-10", hollow: true, styleType: EStyle.Warning }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Timeline

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETimeline { model: [{ "content": qsTr("Published successfully"), "timestamp": "2026-10-10", "styleType": EStyle.Success }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

contentDelegateComponent

Component slot for custom body content; null uses the default content. See this page’s examples for delegate context.

Defaultnull

dotDelegateComponent

Component slot for custom timeline dot; null uses the default content. See this page’s examples for delegate context.

Defaultnull

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

modestring

Timeline layout mode.

start
end
alternate
alternate-reverse

Default"start"

modelvar

Array of timeline event data.

Fields:
timestamp, content, icon
contentDelegate

Default[]

reversebool

Display timeline events in reverse order.

Defaultfalse

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

displayEventsvarRead only

Timeline events after ordering.

DefaultComputed at runtime