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 Sizes
We can set radio button sizes with the size
prop.
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
size="xs"
v-model="color"
val="green"
label="green"
color="green"
></q-radio>
<q-radio
size="sm"
v-model="color"
val="red"
label="red"
color="red"
></q-radio>
<q-radio
size="md"
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>
to set the sizes. Other possible values include lg
and xl
.
We can show radio buttons with the q-option-group
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-option-group
:options="options"
label="Notifications"
type="radio"
v-model="group"
>
</q-option-group>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
group: null,
options: [
{ label: "Battery too low", value: "bat" },
{ label: "Friend request", value: "friend", color: "green" },
{ label: "Uploaded", value: "upload", color: "red" }
]
}
});
</script>
</body>
</html>
We set the options
prop to set the options for the radio button.
Checkbox
We can add checkboxes into our Vue app with Quasar’s q-checkbox
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">
<div class="q-gutter-sm">
<q-checkbox v-model="right" label="Label on Right"></q-checkbox>
</div>
<div class="q-gutter-sm">
<q-checkbox
left-label
v-model="left"
label="Label on Left"
></q-checkbox>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
right: false,
left: false
}
});
</script>
</body>
</html>
to add it.
We bind the checked value with the v-model
directive.
The label
prop has the label to display with the checkbox.
left-label
puts the label to the left of the checkbox.
We can change the checkbox color 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">
<div class="q-gutter-sm">
<q-checkbox
v-model="right"
color="green"
label="Label on Right"
></q-checkbox>
</div>
<div class="q-gutter-sm">
<q-checkbox
left-label
keep-color
v-model="left"
label="Label on Left"
color="orange"
></q-checkbox>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
right: false,
left: false
}
});
</script>
</body>
</html>
color
sets the color of the checkbox.
keep-color
sets the outline color to the color value of the color
prop even when it’s unchecked.
Conclusion
We can add checkboxes and radio buttons into our Vue app with the Quasar library.