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
  • f7-fab-backdrop - FAB backdrop element

FAB Properties

PropTypeDefaultDescription
<f7-fab> properties
hrefstring
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
targetstringValue of link target attribute, e.g. _blank, _self, etc.
positionstringright-bottomFAB 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-tostringString CSS selector of the FAB morph target
textstringFAB Button text. If specified, then it will be displayed as Extended Fab with text label
tooltipstringFAB tooltip text to show on button hover/press
tooltip-triggerstringhoverDefines how to trigger (open) Tooltip. Can be hover or click. If hover tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices
<f7-fab-buttons> properties
positionstringtopSpeed 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-closebooleanfalseWhen enabled then clicking on this button will close the FAB
targetstringValue of link target attribute, e.g. _blank, _self, etc.
labelstringButton text label
tooltipstringButton tooltip text to show on button hover/press
tooltip-triggerstringhoverDefines how to trigger (open) Tooltip. Can be hover or click. If hover tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices

FAB Events

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

FAB Slots

FAB Vue component (<f7-fab>) has additional slots for custom elements:

  • default - child element will be inserted inside of the main FAB link <a> element. But if the child is f7-fab-buttons, then it will be inserted in the end of the main FAB element
  • link - child element will be inserted inside of the main FAB link <a> element
  • root - child element will be inserted in the end of the main FAB element
  • text - child element will be inserted in the text element of the Extended FAB

Examples

<f7-page>
  <f7-navbar title="Floating Action Button"></f7-navbar>

  <!-- Toolbar FAB Morph Target -->
  <f7-toolbar bottom class="fab-morph-target">
    <f7-link>Link 1</f7-link>
    <f7-link>Link 2</f7-link>
    <f7-link>Link 3</f7-link>
  </f7-toolbar>

  <!-- FAB Left Top (Yellow) -->
  <f7-fab position="left-top" slot="fixed" color="yellow">
    <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
    <f7-fab-buttons position="bottom">
      <f7-fab-button>1</f7-fab-button>
      <f7-fab-button>2</f7-fab-button>
      <f7-fab-button>3</f7-fab-button>
    </f7-fab-buttons>
  </f7-fab>

  <!-- FAB Right Top (Pink) -->
  <f7-fab position="right-top" slot="fixed" color="pink">
    <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
    <f7-fab-buttons position="left">
      <f7-fab-button>1</f7-fab-button>
      <f7-fab-button>2</f7-fab-button>
      <f7-fab-button>3</f7-fab-button>
    </f7-fab-buttons>
  </f7-fab>

  <!-- FAB Center (Green) -->
  <f7-fab position="center-center" slot="fixed" color="green">
    <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
    <f7-fab-buttons position="center">
      <f7-fab-button>1</f7-fab-button>
      <f7-fab-button>2</f7-fab-button>
      <f7-fab-button>3</f7-fab-button>
      <f7-fab-button>4</f7-fab-button>
    </f7-fab-buttons>
  </f7-fab>

  <!-- FAB Left Bottom (Blue) -->
  <!-- Will morph to Toolbar -->
  <f7-fab position="left-bottom" slot="fixed" morph-to=".toolbar.fab-morph-target">
    <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
  </f7-fab>

  <!-- FAB Right Bottom (Orange) -->
  <f7-fab position="right-bottom" slot="fixed" color="orange">
    <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
    <f7-fab-buttons position="top">
      <f7-fab-button label="Action 1">1</f7-fab-button>
      <f7-fab-button label="Action 2">2</f7-fab-button>
    </f7-fab-buttons>
  </f7-fab>

  <!-- Extended FAB Center Bottom (Red) -->
  <f7-fab position="center-bottom" slot="fixed" text="Create" color="red">
    <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
  </f7-fab>

  <f7-block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias ... voluptatibus eligendi.</p>
  </f7-block>
</f7-page>

With Backdrop

<f7-page>
  <f7-navbar title="FAB Backdrop"></f7-navbar>

  <!-- FAB Backdrop -->
  <f7-fab-backdrop slot="fixed"></f7-fab-backdrop>

  <!-- FAB Right Bottom -->
  <f7-fab position="right-bottom" slot="fixed">
    <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
    <f7-fab-buttons position="top">
      <f7-fab-button label="Action 1">1</f7-fab-button>
      <f7-fab-button label="Action 2">2</f7-fab-button>
    </f7-fab-buttons>
  </f7-fab>

  <f7-block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias ... voluptatibus eligendi.</p>
  </f7-block>
</f7-page>