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: { |
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 --> |
Expandable
Expandable FABs are defined by two components: QFab (parent) and QFabAction (children).
<!-- Expandable --> |
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> |
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 |
For more information about Tooltips, please refer to the Tooltip documentation.
QFab (Parent)
QFab Vue Properties
Vue Property | Type | Default Value | Description |
---|---|---|---|
color | String | n/a | The color of the button, from Quasar Color Palette. |
text-color | String | n/a | The color of the button icon, from Quasar Color Palette. |
direction | String | “right” | The direction in which to expand; one of the following values: “up”, “down”, “left”, “right”. |
icon | String | “add” | Icon to use when not expanded |
active-icon | String | “close” | The icon to change to when expanded. |
outline | Boolean | n/a | Set true, for an outlined button. |
push | Boolean | n/a | Set true, for a push styled button. |
flat | Boolean | n/a | Set true, for a flat styled button. |
glossy | Boolean | n/a | Make button “glossy”. |
persistent | Boolean | false | (v0.17.17+) Do not hide when route changes. |
QFab Vue Methods
Vue Method | Description |
---|---|
toggle() | Toggle open/close state. |
show() | Open FAB. |
hide() | Close FAB. |
QFab Vue Events
Vue Method | Description |
---|---|
@show | Triggered when clicking/tapping on main FAB to open it. |
@hide | Triggered 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 --> |
QFabAction Vue Properties
Vue Property | Type | Description | |
---|---|---|---|
color | String | The color of the button. | |
text-color | String | n/a | The color of the button icon. |
icon | String | The icon of the button. | |
outline | Boolean | Set true, for an outlined button. | |
push | Boolean | Set true, for a push styled button. | |
flat | Boolean | Set true, for a flat styled button. | |
glossy | Boolean | Make button “glossy”. |
QFabAction Vue Events
Vue Method | Description |
---|---|
@click | Triggered 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.