Looking forQuasar v2 betawith Vue 3 docs?
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 sideloose
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
/*
* No installation step is necessary.
* It gets installed by default by @quasar/app v2+.
*/
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?