时间线

QTimeline组件按时间顺序显示事件列表。 它通常是一种图形设计,显示一个长条,并在其旁边标有日期,通常是事件。 时间线可以使用任何时间范围,具体取决于主题和数据。

QTimeline具有3种布局:

  • dense(默认)在时间线的timeline-specified一侧(默认右侧)显示头部、标题、子标题和内容
  • comfortable 在时间线的timeline-specified一侧(默认右侧)上显示头部、标题和内容,在另一侧显示子标题
  • loose 中心显示头部, 在时间线的entry-specified一侧的显示标题和内容(默认右侧),在另一侧显示子标题

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

基础

Basic

仅使用属性

下面是相同的示例,但是仅使用QTimelineEntry属性而不是默认插槽:

Props only

仅使用插槽

以下是相同的示例,但仅使用QTimelineEntry插槽:

Slots only

在黑暗的背景

On a dark background

布局和侧面选择

WARNING

如果QTimeline具有loose布局,则QTimelineEntry仅考虑其side属性。

Layouts and side selection

响应式

TIP

下面的示例使用 $q.screen来检测窗口大小的变化,以查看所有3种实际布局。

Responsive layout

QTimeline API

Loading API...
Please wait...

QTimelineEntry API

Loading API...
Please wait...