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 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”.

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 -->
<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 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.

Page Sticky Element Resize Observable
Last updated: Wed Jun 20 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub