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.
Responsive Carousel
We can wrap the q-responsive component around the q-carousel component to create a responsive carousel:
<!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"
>
<q-responsive :ratio="16/9" style="width: 500px; max-width: 100%;">
<q-carousel swipeable animated arrows v-model="slide" infinite>
<q-carousel-slide
:name="1"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
></q-carousel-slide>
<q-carousel-slide
:name="2"
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
></q-carousel-slide>
<q-carousel-slide
:name="3"
img-src="https://cdn.quasar.dev/img/parallax2.jpg"
></q-carousel-slide>
<template v-slot:control>
<q-carousel-control
position="bottom"
:offset="[16, 8]"
class="text-white text-center rounded-borders"
style="background: rgba(255, 255, 255, 0.2); padding: 4px 8px;"
>
Ratio 16:9
</q-carousel-control>
</template>
</q-carousel>
</q-responsive>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1
}
});
</script>
</body>
</html>
We add the control slot to populate some content of the carousel.
We set the offset to push the content to the bottom.
We set the ratio prop to set the aspect ratio of the container.
The v-model directive is bound to the slide reactive property to set the index of the slide we navigate to.
Scroll Area
We can add a scroll container with the q-scroll-area component:
<!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;">
<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>
We set the height and max-width to make it scrollable when the content overflows the dimensions.
We can set the scrollbar style with the thumb-style and bar-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"
:bar-style="barStyle"
>
<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
},
barStyle: {
right: "2px",
borderRadius: "9px",
backgroundColor: "#027be3",
width: "9px",
opacity: 0.2
}
}
});
</script>
</body>
</html>
thumb-style sets the styles for the scroll bar button.
And bar-style sets the styles for the scroll bar.
Conclusion
We can add a responsive carousel and scroll container into our Vue app with Quasar.
