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.
Ripple Effect
We can use the v-ripple directive to add ripple effects to elements or components that don’t have the effect built-in.
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">
<div class="q-pa-md row justify-center">
<div v-ripple class="relative-position container flex flex-center">
Click me
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We just add it to the element directly to add the effect.
We can change the color with an argument:
<!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">
<div class="q-pa-md row justify-center">
<div
v-ripple:purple
class="relative-position container flex flex-center"
>
Click me
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Also, we can change the position by writing:
<!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">
<style>
.container {
border-radius: 50%;
cursor: pointer;
width: 150px;
height: 150px;
}
</style>
<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">
<div class="q-pa-md row justify-center">
<div
v-ripple.center
class="relative-position container bg-grey-3 text-black inline flex flex-center"
>
Click me
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Watch Scrolling
We can watch scrolling of an element with the v-scroll directive.
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">
<div class="q-pa-md">
<div v-scroll="scrolled">
<p v-for="n of 1000" :key="n">{{n}}</p>
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
scrolled(position) {
console.log(position);
}
}
});
</script>
</body>
</html>
We pass in the scrolled event listener as the value of v-scroll .
Then we can get the position in pixels with the position parameter.
Trigger Scroll Effect Once
We can add the v-scroll-fire directive to trigger an effect once when the element is in view.
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">
<style>
.animate-bounce {
animation: q-bounce 2s infinite;
}
@keyframes q-bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
</style>
<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">
<div class="q-pa-md">
<div>
<p v-for="n of 1000" :key="n">{{n}}</p>
<img
v-scroll-fire="bounceImage"
src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg"
/>
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
bounceImage(el) {
el.classList.add("animate-bounce");
setTimeout(() => {
if (document.body.contains(el)) {
el.classList.remove("animate-bounce");
}
}, 2000);
}
}
});
</script>
</body>
</html>
The bounceImage method is set as the value of the directive.
And it run once when the img element is in view to add the animate-bounce class and remove it after 2 seconds.
Conclusion
We can add various effects with the directives that are provided by Quasar.
