组件/数据展示

ETimeline 时间线

import EUI 1.0

示例与代码

交替布局、图标与时间位置

QML 代码QML

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("需求确认"), timestamp: "2026-10-01", placement: "top", styleType: EStyle.Success }, { content: qsTr("开发完成"), timestamp: "2026-10-05", icon: EIcons.CHECK, size: "large" }, { content: qsTr("准备发布"), timestamp: "2026-10-10", hollow: true, styleType: EStyle.Warning }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

时间线

QML 代码QML

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

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

contentDelegateComponent

自定义主体内容的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

dotDelegateComponent

自定义时间线节点的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

enabledbool

是否允许交互；false 时控件禁用。

默认值true

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

modestring

时间线的布局模式。

start
end
alternate
alternate-reverse

默认值"start"

modelvar

时间线事件的数据数组。

字段：
timestamp, content, icon
contentDelegate

默认值[]

reversebool

倒序显示时间线。

默认值false

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

displayEventsvar只读

经过顺序处理后的时间线项目。

默认值由运行时计算