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.
Rating Control Color
We can set the color of each icon with the color-selected 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"
>
<q-rating
v-model="ratingModel"
color="grey"
size="3.5em"
:color-selected="ratingColors"
>
</q-rating>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
ratingModel: 4.5,
ratingColors: [
"light-green-3",
"light-green-6",
"green",
"green-9",
"green-10"
]
}
});
</script>
</body>
</html>
We can set a different icon for half scores with he icon-half 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"
>
<q-rating
v-model="ratingModel"
size="3.5em"
color="yellow"
icon="star_border"
icon-selected="star"
icon-half="star_half"
>
</q-rating>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
ratingModel: 4.5
}
});
</script>
</body>
</html>
We can disable dimming for unselected icons with the no-dimming 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"
>
<q-rating
v-model="ratingModel"
size="3.5em"
color="yellow"
icon="star_border"
icon-selected="star"
icon-half="star_half"
no-dimming
>
</q-rating>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
ratingModel: 3.5
}
});
</script>
</body>
</html>
Rating Tooltip
We can set the tooltip for each rating by populating the slots for the tooltip content:
<!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-rating v-model="ratingModel" size="3.5em" :max="3">
<template v-slot:tip-1>
<q-tooltip>Not bad</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>Good</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>Very good</q-tooltip>
</template>
</q-rating>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
ratingModel: 2
}
});
</script>
</body>
</html>
tip-1’s content is shown when we hover over the left star. tip-2 ‘s content is show when we hover over the 2nd to left star, etc.
Readonly and Disable
We can disable rating selection with the readonly or disable 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"
>
<q-rating v-model="ratingModel" size="3.5em" :max="3" readonly>
</q-rating>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
ratingModel: 2
}
});
</script>
</body>
</html>
Conclusion
We can add a rating component with various options into our Vue app with Quasar.
