Floating Action Buttons     

A Floating Action Button (FAB) represents the primary action in an App Page. But, it’s not limited to only a single action. It can contain any number of sub-actions too. And more importantly, it can also be used inline in your Pages or Layouts.

Note that you don’t need a QLayout to use FABs.

Installation

Edit /quasar.conf.js:

framework: {
components: [
'QFab',
'QFabAction'
]
}

Basic Usage

There are two types of FABs: expandable (has sub-actions) and non-expandable.

Non-Expandable

If you want a non-expandable FAB, all you need is a round button – wrapped in QPageSticky if used on a QLayout.

<!-- Non-expandable without being on a QLayout -->
<q-btn
round
color="primary"
@click="method"
class="fixed"
icon="mail"
style="right: 18px; bottom: 18px"
/>

<!-- Non-expandable on a QLayout -->
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn
round
color="primary"
@click="method"
icon="mail"
/>
</q-page-sticky>

Expandable

Expandable FABs are defined by two components: QFab (parent) and QFabAction (children).

<!-- Expandable -->
<q-fab
color="purple"
icon="keyboard_arrow_up"
direction="up"
>
<q-fab-action
color="primary"
@click="someMethod"
icon="mail"
/>

<q-fab-action
color="secondary"
@click="someMethod"
icon="alarm"
/>
</q-fab>

<!-- Expandable, fixed position without a QLayout -->
<q-fab
class="fixed"
style="right: 18px; bottom: 18px"
color="primary"
icon="wifi"
>....</q-fab>

<!-- Expandable, fixed position on a QLayout -->
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-fab
color="primary"
icon="wifi"
>....</q-fab>
</q-page-sticky>

We’ll continue describing only the expandable FAB, as the non-expandable FAB is, as mentioned above, a simple round button.

Toggle through v-model

<template>
<div>
<q-fab
v-model="open"
color="primary"
icon="wifi"
>....</q-fab>
</div>
</template>

<script>
export default {
data () {
return {
open: false
}
},
methods: {
toggleFab () {
this.open = !this.open
}
}
}
</script>

Labeling with Tooltips

Notice slot="tooltip" for the Tooltip on main button and where are the Tooltips placed for the Fab action buttons.

<q-fab
color="primary"
active-icon="alarm"
direction="up"
>
<q-tooltip
slot="tooltip"
anchor="center left"
self="center right"
:offset="[20, 0]"
>
Tooltip in FAB
</q-tooltip>

<q-fab-action color="purple" @click="toast('mail')" icon="mail">
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Mail</q-tooltip>
</q-fab-action>
<q-fab-action color="secondary" @click="toast('alarm')" icon="alarm">
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Alarm</q-tooltip>
</q-fab-action>
</q-fab>

For more information about Tooltips, please refer to the Tooltip documentation.

QFab (Parent)

QFab Vue Properties

Vue PropertyTypeDefault ValueDescription
colorStringn/aThe color of the button, from Quasar Color Palette.
text-colorStringn/aThe color of the button icon, from Quasar Color Palette.
directionString“right”The direction in which to expand; one of the following values: “up”, “down”, “left”, “right”.
iconString“add”Icon to use when not expanded
active-iconString“close”The icon to change to when expanded.
outlineBooleann/aSet true, for an outlined button.
pushBooleann/aSet true, for a push styled button.
flatBooleann/aSet true, for a flat styled button.
glossyBooleann/aMake button “glossy”.
persistentBooleanfalse(v0.17.17+) Do not hide when route changes.

QFab Vue Methods

Vue MethodDescription
toggle()Toggle open/close state.
show()Open FAB.
hide()Close FAB.

QFab Vue Events

Vue MethodDescription
@showTriggered when clicking/tapping on main FAB to open it.
@hideTriggered when clicking/tapping on main FAB to close it.

QFabAction (Child)

The cool bit about FABs is, they give the user the ability to select from a number of actions. These actions can be offered through a list of QFabAction components witin the QFab.

Basic Usage

<!-- a q-fab with two actions -->
<q-fab
color="purple"
icon="keyboard_arrow_up"
direction="up"
>
<q-fab-action
class="white"
@click="someMethod()"
icon="mail"
/>

<q-fab-action
class="white"
@click="someMethod()"
icon="alarm"
/>
</q-fab>

QFabAction Vue Properties

Vue PropertyTypeDescription
colorStringThe color of the button.
text-colorStringn/aThe color of the button icon.
iconStringThe icon of the button.
outlineBooleanSet true, for an outlined button.
pushBooleanSet true, for a push styled button.
flatBooleanSet true, for a flat styled button.
glossyBooleanMake button “glossy”.

QFabAction Vue Events

Vue MethodDescription
@clickTriggered when clicking/tapping on the small fab.

Note
Clicking on a QFabAction will automatically close the list of sub-actions and return the FAB to its original state.