Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Dark Timeline
We can add the dark prop to display the timeline in a dark background.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md bg-grey-10 text-white">
<q-timeline color="secondary" dark>
<q-timeline-entry
heading
body="Timeline heading"
></q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 22, 2000"
avatar="https://cdn.quasar.dev/img/avatar3.jpg"
:body="body"
>
</q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 21, 2000"
icon="delete"
:body="body"
>
</q-timeline-entry>
<q-timeline-entry heading body="November, 2017"></q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 22, 2000"
:body="body"
>
</q-timeline-entry>
</q-timeline>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
body: "Lorem ipsum dolor sit amet"
}
});
</script>
</body>
</html>
We add the bg-grey-10 background to make the background dark.
And text-white makes the text white.
Timeline Layout and Side
We can add the timeline layout and side with the layout and side props:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-timeline color="secondary" layout="dense" side="left">
<q-timeline-entry
heading
body="Timeline heading"
></q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 22, 2000"
avatar="https://cdn.quasar.dev/img/avatar3.jpg"
:body="body"
>
</q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 21, 2000"
icon="delete"
:body="body"
>
</q-timeline-entry>
<q-timeline-entry heading body="November, 2017"></q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 22, 2000"
:body="body"
>
</q-timeline-entry>
</q-timeline>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
body: "Lorem ipsum dolor sit amet"
}
});
</script>
</body>
</html>
layout can be set to dense , comfortable or loose .
And side can be left or right .
Responsive Timeline
We can add a responsive timeline by setting the layout prop dynamically:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-timeline color="secondary" :layout="layout">
<q-timeline-entry
heading
body="Timeline heading"
></q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 22, 2000"
avatar="https://cdn.quasar.dev/img/avatar3.jpg"
:body="body"
>
</q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 21, 2000"
icon="delete"
:body="body"
>
</q-timeline-entry>
<q-timeline-entry heading body="November, 2017"></q-timeline-entry>
<q-timeline-entry
title="Event Title"
subtitle="February 22, 2000"
:body="body"
>
</q-timeline-entry>
</q-timeline>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
body: "Lorem ipsum dolor sit amet"
},
computed: {
layout() {
return this.$q.screen.lt.sm
? "dense"
: this.$q.screen.lt.md
? "comfortable"
: "loose";
}
}
});
</script>
</body>
</html>
We add the layout computed property, which returns the value of layout by checking the screen size and returning the corresponding value.
Conclusion
We can add timelines with various options with Quasar’s timeline component.
