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.
Custom Floating Action Button Label Styles
We can change the styles of the floating action button label with the label-class 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-page-container>
<q-page padding>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-fab
v-model="fab1"
label="Actions"
label-position="top"
label-class="bg-grey-3 text-purple"
external-label
color="purple"
icon="keyboard_arrow_left"
direction="left"
>
<q-fab-action
external-label
label-position="top"
color="primary"
@click="onClick"
icon="mail"
label="Email"
label-class="bg-grey-3 text-purple"
>
</q-fab-action>
<q-fab-action
external-label
label-position="top"
color="secondary"
@click="onClick"
icon="alarm"
label="Alarm"
label-class="bg-grey-3 text-purple"
>
</q-fab-action>
</q-fab>
</q-page-sticky>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
fab1: false
},
methods: {
onClick() {
console.log("clicked");
}
}
});
</script>
</body>
</html>
Also, we can make the floating action buttons square with the square 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-page-container>
<q-page padding>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-fab
v-model="fab1"
label="Actions"
label-position="top"
label-class="bg-grey-3 text-purple"
external-label
color="purple"
icon="keyboard_arrow_left"
direction="left"
square
>
<q-fab-action
external-label
label-position="top"
color="primary"
@click="onClick"
icon="mail"
label="Email"
square
>
</q-fab-action>
<q-fab-action
external-label
label-position="top"
color="secondary"
@click="onClick"
icon="alarm"
label="Alarm"
square
>
</q-fab-action>
</q-fab>
</q-page-sticky>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
fab1: false
},
methods: {
onClick() {
console.log("clicked");
}
}
});
</script>
</body>
</html>
Input Text Field
Quasar comes with an input text field component.
To add it, we use the q-input 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-input v-model="text" label="Standard"></q-input>
<br />
<q-input filled v-model="text" label="Filled"></q-input>
<br />
<q-input outlined v-model="text" label="Outlined"></q-input>
<br />
<q-input standout v-model="text" label="Standout"></q-input>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: ""
}
});
</script>
</body>
</html>
We add the q-input component with the filled prop to add a gray background.
outlined adds an outline to the input.
standout makes the background turn black when we focus on the input.
Conclusion
We can add square floating action buttons and input text fields into our Vue app with the Quasar library.
