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)comfortableis showing headings, titles and content on the timeline-specified side of the time line (default on right) and the subtitles on the other sidelooseis 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
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:
Dark design
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.