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.
Radio Button
We can add radio buttons into our Vue app with the q-radio 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-radio v-model="fruit" val="apple" label="apple"></q-radio>
<q-radio v-model="fruit" val="orange" label="orange"></q-radio>
<q-radio v-model="fruit" val="grape" label="grape"></q-radio>
</div>
<div class="q-px-sm">
<strong>{{ fruit }}</strong>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
fruit: ""
}
});
</script>
</body>
</html>
to add the q-radio components to add radio buttons.
val has the value of the radio button.
label has the label value.
The v-model of each radio button is bound to the same radio button to set the fruit value to the value of val .
When we click on the radio button, we see the choice that’s selected.
We can change the color of the radio button with the color 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-radio
keep-color
v-model="color"
val="green"
label="green"
color="green"
></q-radio>
<q-radio
keep-color
v-model="color"
val="red"
label="red"
color="red"
></q-radio>
<q-radio
keep-color
v-model="color"
val="blue"
label="blue"
color="blue"
></q-radio>
</div>
<div class="q-px-sm">
<strong>{{ color }}</strong>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
color: ""
}
});
</script>
</body>
</html>
The keep-color prop keeps the color of the radio button outline even if it’s not selected.
The label is placed on the right side by default, but it can be placed on the left side with the left-label 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-radio
left-label
keep-color
v-model="color"
val="green"
label="green"
color="green"
></q-radio>
<q-radio
left-label
keep-color
v-model="color"
val="red"
label="red"
color="red"
></q-radio>
<q-radio
left-label
keep-color
v-model="color"
val="blue"
label="blue"
color="blue"
></q-radio>
</div>
<div class="q-px-sm">
<strong>{{ color }}</strong>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
color: ""
}
});
</script>
</body>
</html>
Conclusion
We can add radio buttons into our Vue app with the Quasar library.