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.
Square Skeleton
We can make the skeleton corners square with the square prop:
<!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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-skeleton square></q-skeleton>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We can set the color of the skeleton by setting the class for the color:
<!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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-skeleton class="bg-accent" type="circle"></q-skeleton>
<br />
<q-skeleton class="bg-teal"></q-skeleton>
<br />
<q-skeleton class="bg-orange" animation="pulse-y"></q-skeleton>
<br />
<q-skeleton class="bg-indigo"></q-skeleton>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We can set the skeleton border styles with our own class:
<!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>
.custom-skeleton-border {
border-radius: 10px 0 24px 4px;
border: 1px solid #aaa;
}
</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-skeleton
width="100px"
height="50px"
class="custom-skeleton-border"
>
</q-skeleton>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Slide Item
We can add slide items with the q-slide-item component.
It’s a container that does something when we slide it left or right.
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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-slide-item @left="onLeft" @right="onRight">
<template v-slot:left>
<q-icon name="done"></q-icon>
</template>
<template v-slot:right>
<q-icon name="alarm"></q-icon>
</template>
<q-item>
<q-item-section avatar>
<q-avatar
color="primary"
text-color="white"
icon="bluetooth"
></q-avatar>
</q-item-section>
<q-item-section>Icons only</q-item-section>
</q-item>
</q-slide-item>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
onLeft({ reset }) {
this.$q.notify("Left action triggered. Resetting in 1 second.");
this.finalize(reset);
},
onRight({ reset }) {
this.$q.notify("Right action triggered. Resetting in 1 second.");
this.finalize(reset);
},
finalize(reset) {
this.timer = setTimeout(() => {
reset();
}, 1000);
}
}
});
</script>
</body>
</html>
We add a slide item with the q-slide-item component.
And we populate the content we want to display when the left slide action is triggered with the left slot.
And we can do the same with the right slot to populate content when the right slide action is triggered.
We listen to the left and right events to listen for each action.
The parameter of the event handlers has the reset method to let us reset the slide item to the initial state.
Conclusion
We can add a placeholder with various styles and we can add slide items to add an item that lets us show something when we slide it.
