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.
List Items with Content
We can add list items with the q-item-section and q-avatar component.
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"
/>
<style>
.example-item {
height: 200px;
width: 200px;
}
</style>
</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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-list dense bordered padding class="rounded-borders">
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon color="primary" name="bluetooth"></q-icon>
</q-item-section>
<q-item-section>icon</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-avatar
color="teal"
text-color="white"
icon="bluetooth"
></q-avatar>
</q-item-section>
<q-item-section>icon</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-avatar
rounded
color="purple"
text-color="white"
icon="bluetooth"
></q-avatar>
</q-item-section>
<q-item-section>icon</q-item-section>
</q-item>
</q-list>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
We add the q-item-section component with the avatar prop to add an avatar on the left side.
q-icon adds an icon.
We can substitute an icon with an image:
<!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"
/>
<style>
.example-item {
height: 200px;
width: 200px;
}
</style>
</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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-list dense bordered padding class="rounded-borders">
<q-item clickable v-ripple>
<q-item-section thumbnail>
<img src="https://cdn.quasar.dev/img/mountains.jpg" />
</q-item-section>
<q-item-section>icon</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section thumbnail>
<img src="https://cdn.quasar.dev/img/mountains.jpg" />
</q-item-section>
<q-item-section>icon</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section thumbnail>
<img src="https://cdn.quasar.dev/img/mountains.jpg" />
</q-item-section>
<q-item-section>icon</q-item-section>
</q-item>
</q-list>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
Also, we can position secondary text with the side , top , and caption 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"
/>
<style>
.example-item {
height: 200px;
width: 200px;
}
</style>
</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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-list dense bordered padding class="rounded-borders">
<q-item>
<q-item-section>
<q-item-label>Single line item</q-item-label>
<q-item-label caption>
Lorem ipsum dolor sit amet, consectetur adipiscit elit.
</q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label caption>2 min ago</q-item-label>
<div class="text-orange">
<q-icon name="star"></q-icon>
<q-icon name="star"></q-icon>
<q-icon name="star"></q-icon>
</div>
</q-item-section>
</q-item>
<q-separator spaced inset></q-separator>
<q-item>
<q-item-section>
<q-item-label>Single line item</q-item-label>
<q-item-label caption>
Lorem ipsum dolor sit amet, consectetur adipiscit elit.
</q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label caption>meta</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
caption displays the text as a secondary text.
side puts the text on the right side. top puts the text at the top.
Conclusion
We can add list items with various kinds of content with the Quasar library.
