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.conf.js

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

Usage

Basic

Basic



Using props only

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

Props only



Using slots only

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

Slots only



On dark background

On a dark background



Layouts and side selection

WARNING

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

Layouts and side selection



Responsive

TIP

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

Responsive layout



QTimeline API

QTimelineEntry API