Floating Action Button Vue Component

Floating action buttons (FABs) are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

Floating Action Button Vue component represents Floating Action Button element.

FAB Components

There are following components included:

  • f7-fab - main FAB element
  • f7-fab-buttons - wrapper for multiple FAB buttons used as Speed Dial FAB
  • f7-fab-button - single FAB Speed Dial button

FAB Properties

Prop Type Default Description
<f7-fab> properties
href string
boolean
URL of the page to load (if set). Will set href attribute on main FAB link. In case of boolean href="false" it won't add href tag
position string right-bottom FAB position. Can be one of the following:
  • right-bottom
  • center-bottom
  • left-bottom
  • right-center
  • center-center
  • left-center
  • right-top
  • center-top
  • left-top
morph-to string String CSS selector of the FAB morph target
<f7-fab-buttons> properties
position string top Speed dial buttons position, can be one of the following:
  • top - buttons will appear on top of FAB
  • right - buttons will appear on right of FAB
  • bottom - buttons will appear on bottom of FAB
  • left - buttons will appear on left of FAB
  • center - buttons will appear around of FAB
<f7-fab-button> properties
fab-close boolean false When enabled then clicking on this button will close the FAB

FAB Events

Event Description
<f7-fab> events
click Event will be triggered after click on FAB
<f7-fab-button> events
click Event will be triggered after click on FAB Speed Dial button

Examples

Default FAB

<f7-page>
  <!-- FAB must be direct child of a page -->
  <f7-fab color="pink" @click="doSomething">
    <f7-icon f7="add"></f7-icon>
  </f7-fab>
  ...
</f7-page>

Renders to:

...
<div class="fab fab-right-bottom color-pink">
  <a href="#">
    <i class="icon f7-icons">add</i>
  </a>
</div>
...

Speed Dial

<f7-page>
  <!-- FAB must be direct child of a page -->
  <f7-fab color="pink" @click="doSomething">
    <!-- First icon is visible when Speed Dial actions are closed -->
    <f7-icon f7="add"></f7-icon>
    <!-- Second icon is visible when Speed Dial actions are opened -->
    <f7-icon f7="close"></f7-icon>

    <!-- Speed Dial Buttons -->
    <f7-fab-buttons>
      <f7-fab-button color="orange" @click="onButtonClick">A</f7-fab-button>
      <f7-fab-button color="green" @click="onButtonClick">B</f7-fab-button>
      <f7-fab-button color="blue" @click="onButtonClick">C</f7-fab-button>
    </f7-fab-buttons>
  </f7-fab>
  ...
</f7-page>

Renders to:

...
<div class="fab fab-right-bottom color-pink">
  <a href="#">
    <i class="icon f7-icons">add</i>
    <i class="icon f7-icons">close</i>
  </a>
  <div class="fab-buttons fab-buttons-top">
    <a href="#" class="color-orange">A</a>
    <a href="#" class="color-green">B</a>
    <a href="#" class="color-blue">C</a>
  </div>
</div>
...