API 浏览器
时间轴

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

¥The QTimeline component displays a list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates alongside itself and usually events. Timelines can use any time scale, depending on the subject and data.

QTimeline 有 3 种布局:

¥QTimeline has 3 layouts:

  • dense(默认)在时间线指定的一侧显示标题、标题、副标题和内容(默认在右侧)

    ¥dense (default) is showing headings, titles, subtitles and content on the timeline-specified side of the time line (default on right)

  • comfortable 会在时间线的入口指定侧(默认在右侧)显示标题、标题和内容,在时间线的另一侧显示字幕。

    ¥comfortable is showing headings, titles and content on the timeline-specified side of the time line (default on right) and the subtitles on the other side

  • loose 会在中心显示标题,在时间线的入口指定侧(默认在右侧)显示标题和内容,在另一侧显示字幕。

    ¥loose is showing headings on center, titles and content on the entry-specified side of the time line (default on right) and the subtitles on the other side

Loading QTimeline API...
Loading QTimelineEntry API...

用法(Usage)

¥Usage

基本(Basic)

¥Basic

Basic



仅使用 props(Using props only)

¥Using props only

下面是同一个示例,但仅使用 QTimelineEntry 属性代替默认插槽:

¥Below is the same example, but using QTimelineEntry properties only instead of the default slot:

Props only



仅使用 slot(Using slots only)

¥Using slots only

下面是同一个示例,但仅使用了 QTimelineEntry 插槽:

¥Below is again the same example, but using only QTimelineEntry slots:

Slots only



暗黑设计(Dark design)

¥Dark design

Force dark mode



布局和侧边选择(Layouts and side selection)

¥Layouts and side selection

警告

QTimelineEntry 仅在 QTimeline 采用 loose 布局时才会考虑其 side 属性。

¥QTimelineEntry only takes into account its side prop if QTimeline has the loose layout.

Layouts and side selection



响应式(Responsive)

¥Responsive

提示

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

¥The examples below uses $q.screen to detect changes in window size to see all 3 layouts in action.

Responsive layout