时间线
QTimeline 组件按时间顺序显示事件列表。它通常是一个图形设计,显示一个长条形图,在其旁边标注日期,通常是事件。时间线可以使用任何时间尺度,具体取决于主题和数据。
QTimeline 有 3 种布局:
dense
(默认) 在时间线的时间线指定侧(默认是右侧)显示头部,标题,和内容。comfortable
在时间线的时间线指定侧(默认是右侧)显示头部,标题,副标题和内容,在另一侧显示副标题。loose
在中间显示头部,在条目指定侧(默认在右侧)显示标题和内容,在另一侧显示副标题。
QTimeline API
QTimelineEntry API
用法
基础
仅使用 props
下面是一个同样的示例,但是仅使用了 QTimelineEntry 的属性代替了默认插槽。
仅使用插槽
下面是一个同样的示例,但是仅使用了 QTimelineEntry 的插槽。
在黑色的背景上
布局和侧面区域
WARNING
如果 QTimeline 使用了 loose
,QTimelineEntry 的 side
属性不会生效。
响应式
TIP
下面的示例使用了 $q.screen
来检测窗口的大小,改变窗口的大小以查看所有 3 个布局。