Timeline

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 has 3 layouts:

dense (default) is showing headings, titles, subtitles and content on the timeline-specified side of the time line (default on right)
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 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

Installation

Quasar CLI

UMD

Vue CLI

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QTimeline',
      'QTimelineEntry'
    ]
  }
}

Usage

Basic

Using props only

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

Using slots only

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

On dark background

Layouts and side selection

WARNING

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

Responsive

TIP

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

QTimeline API

QTimelineEntry API

Ready for more?