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.
Scroll Container Content Style
We can set the scroll container’s content style with the content-style and content-active-style 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"
/>
</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-scroll-area
style="height: 200px; max-width: 300px;"
:thumb-style="thumbStyle"
:content-style="contentStyle"
:content-active-style="contentActiveStyle"
>
<div v-for="n in 100" :key="n" class="q-py-xs">
Lorem ipsum dolor sit amet
</div>
</q-scroll-area>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
thumbStyle: {
right: "4px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75
},
contentStyle: {
backgroundColor: "rgba(0,0,0,0.02)",
color: "#555"
},
contentActiveStyle: {
backgroundColor: "yellow",
color: "black"
}
}
});
</script>
</body>
</html>
When we hover our mouse over the content, then the content-active-style styles are applied.
Otherwise, the content-style styles are applied.
We can set the background to a dark background with the dark 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-scroll-area
style="height: 200px; max-width: 300px;"
dark
class="bg-dark text-white rounded-borders"
>
<div v-for="n in 100" :key="n" class="q-py-xs">
Lorem ipsum dolor sit amet
</div>
</q-scroll-area>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
And we set the text to text-white to set the text to white.
We can control the scrollbar visibility with the visible 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-scroll-area style="height: 200px; max-width: 300px;" visible>
<div v-for="n in 100" :key="n" class="q-py-xs">
Lorem ipsum dolor sit amet
</div>
</q-scroll-area>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Scroll Bar Display Delay
We can change the delay when the scrollbar appears and disappears with the delay 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-scroll-area style="height: 200px; max-width: 300px;" :delay="1200">
<div v-for="n in 100" :key="n" class="q-py-xs">
Lorem ipsum dolor sit amet
</div>
</q-scroll-area>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
Conclusion
We can set the scroll bar and content style of the scroll container with Quasar.
