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.
Parallax Scroll Speed
We can change the parallax scroll speed with the speed 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">
<div
class="row justify-between overflow-scroll"
style="height: 150px;"
>
<q-parallax :height="300" :speed="0.5">
<template v-slot:media>
<img src="https://cdn.quasar.dev/img/parallax1.jpg" />
</template>
<h1 class="text-white">Docks</h1>
</q-parallax>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
current: 1
}
});
</script>
</body>
</html>
We can get data about the scroll progress by getting the scope object from the content slot:
<!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 overflow-scroll"
style="height: 150px;"
>
<q-parallax :height="500" :speed="0.5">
<template v-slot:media>
<img src="https://cdn.quasar.dev/img/parallax1.jpg" />
</template>
<template v-slot:content="scope">
<div
class="absolute column items-center"
:style="{
opacity: 0.45 + (1 - scope.percentScrolled) * 0.55,
top: (scope.percentScrolled * 60) + '%',
left: 0,
right: 0
}"
>
<img
src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg"
style="width: 150px; height: 150px;"
/>
<div class="text-h6 text-grey-3 text-center">
v{{ $q.version }}
</div>
</div>
</template>
</q-parallax>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
current: 1
}
});
</script>
</body>
</html>
We add the scroll content in the content slot and get the scroll progress with the scope.percentScrolled property.
Popup Edit
We can add the ability for the user to edit table cell data with the q-popup-edit 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"
/>
</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-table
:data="data"
:columns="columns"
title="QDataTable with QPopupEdit"
:rows-per-page-options="[]"
row-key="name"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="desc" :props="props">
{{ props.row.name }}
<q-popup-edit v-model="props.row.name" title="Edit the Name">
<q-input
v-model="props.row.name"
dense
autofocus
counter
></q-input>
</q-popup-edit>
</q-td>
<q-td key="calories" :props="props">
{{ props.row.calories }}
<q-popup-edit v-model.number="props.row.calories">
<q-input
type="number"
v-model.number="props.row.calories"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="fat" :props="props">
{{ props.row.fat }}
<q-popup-edit v-model.number="props.row.fat">
<q-input
type="number"
v-model.number="props.row.fat"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="carbs" :props="props">
{{ props.row.carbs }}
<q-popup-edit v-model.number="props.row.carbs" disable>
<q-input
type="number"
v-model.number="props.row.carbs"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="protein" :props="props">
{{ props.row.protein }}
<q-popup-edit v-model.number="props.row.protein">
<q-input
type="number"
v-model.number="props.row.protein"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="sodium" :props="props">
{{ props.row.sodium }}
<q-popup-edit v-model.number="props.row.sodium">
<q-input
type="number"
v-model.number="props.row.sodium"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="calcium" :props="props">
{{ props.row.calcium }}
<q-popup-edit v-model="props.row.calcium">
<template v-slot:title>
<div class="text-italic text-primary">
My Custom Title
</div>
</template>
<q-input v-model="props.row.calcium" dense autofocus />
</q-popup-edit>
</q-td>
<q-td key="iron" :props="props">
{{ props.row.iron }}
<q-popup-edit v-model="props.row.iron">
<q-input v-model="props.row.iron" dense autofocus />
</q-popup-edit>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "desc",
align: "left",
label: "Dessert (100g serving)",
field: "name"
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories"
},
{ name: "fat", label: "Fat (g)", field: "fat" },
{ name: "carbs", label: "Carbs (g)", field: "carbs" }
];
const data = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0
}
];
new Vue({
el: "#q-app",
data: {
data,
columns
}
});
</script>
</body>
</html>
We add the q-popup-edit component within the q-td component.
And we get the table cell data from the props.row property.
Conclusion
We can set the speed of parallax scrolling and add a popup edit box for table cells into our Vue app with Quasar.
