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.
Remove Ellipses from Paginator
We can set the ellipses prop to false to remove the ellipses from the paginator.
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-pagination
:max="10"
:max-pages="6"
:boundary-numbers="false"
:ellipses="false"
v-model="current"
>
</q-pagination>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
current: 1
}
});
</script>
</body>
</html>
Boundary Links
We can add boundary links with the boundary-links 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-pagination
:max="10"
:max-pages="6"
boundary-links
v-model="current"
>
</q-pagination>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
current: 1
}
});
</script>
</body>
</html>
Direction Links
And we can add the direction links with the direction-links 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-pagination
:max="10"
:max-pages="6"
direction-links
v-model="current"
>
</q-pagination>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
current: 1
}
});
</script>
</body>
</html>
Parallax Scrolling
We can add parallax scrolling with the q-parallax component.
To use it, we 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">
<div class="row justify-between">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg">
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
current: 1
}
});
</script>
</body>
</html>
We just add the text content inside it.
And we set the src prop to the background image’s URL.
We can add a video as the background by populating the media slot with the video element:
<!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">
<div class="row justify-between">
<q-parallax>
<template v-slot:media>
<video
width="720"
height="440"
poster="https://cdn.quasar.dev/img/polina.jpg"
autoplay
loop
muted
>
<source
type="video/webm"
src="https://cdn.quasar.dev/img/polina.webm"
/>
<source
type="video/mp4"
src="https://cdn.quasar.dev/img/polina.mp4"
/>
</video>
</template>
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
current: 1
}
});
</script>
</body>
</html>
Conclusion
We can add a paginator with various options and add parallax scroll with Quasar.
