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.
Expandable Floating Buttons
We can add expandable floating buttons that show more items when we click it by adding q-fab-action components inside the q-fab component.
For example, 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"
>
<q-page-container>
<q-page padding>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-fab color="purple" icon="keyboard_arrow_up" direction="up">
<q-fab-action
color="primary"
@click="onClick"
icon="mail"
></q-fab-action>
<q-fab-action
color="secondary"
@click="onClick"
icon="alarm"
></q-fab-action>
</q-fab>
</q-page-sticky>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
},
methods: {
onClick() {
console.log("clicked");
}
}
});
</script>
</body>
</html>
We can also add labels inside the floating action button and position it with the label and label-position props respectively:
<!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
label="Actions"
label-position="left"
color="purple"
icon="keyboard_arrow_up"
direction="up"
>
<q-fab-action
color="primary"
@click="onClick"
icon="mail"
></q-fab-action>
<q-fab-action
color="secondary"
@click="onClick"
icon="alarm"
></q-fab-action>
</q-fab>
</q-page-sticky>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
},
methods: {
onClick() {
console.log("clicked");
}
}
});
</script>
</body>
</html>
The internal label can be hidden with the hide-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"
>
<q-page-container>
<q-page padding>
<q-toggle v-model="hideLabels" label="Hide labels"></q-toggle>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-fab
label="Actions"
label-position="left"
color="purple"
icon="keyboard_arrow_up"
direction="up"
:hide-label="hideLabels"
>
</q-fab>
</q-page-sticky>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
hideLabels: false
}
});
</script>
</body>
</html>
We can have the labels outside the button by adding the external-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"
>
<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"
external-label
color="purple"
icon="keyboard_arrow_left"
direction="left"
>
<q-fab-action
external-label
label-position="top"
color="primary"
[@click](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fclick "Twitter profile for @click")="onClick"
icon="mail"
label="Email"
>
</q-fab-action>
<q-fab-action
external-label
label-position="top"
color="secondary"
[@click](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fclick "Twitter profile for @click")="onClick"
icon="alarm"
label="Alarm"
>
</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>
Conclusion
We can add floating buttons with various customizations into our Vue app with the Quasar library.
