Floating Action Button

Floating action button (FAB) is 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.

Layout of floating action button is very simple. Just put it as the direct child of or view:

FAB position is configured via additional fab-[horizontal]-[vertical] class. The following clases are avaialble:

fab-right-bottom
fab-center-bottom
fab-left-bottom
fab-right-center
fab-center-center
fab-left-center
fab-right-top
fab-center-top
fab-left-top

FAB Colors

FAB supports all default colors. To change its color just add color-[color] class to FAB element.

<!-- Red FAB -->
<div class="fab fab-left-top color-red"></div>
<!-- Green FAB -->

Extended FAB

The extended FAB is wider, and it includes a text label. To make extended FAB we need to add additional fab-extended class to FAB element and put its extra text in <div class="fab-text"> element inside:

The floating action button can fling out related actions upon press. The button should remain on screen after the menu is invoked. Tapping in the same spot should either activate the most commonly used action or close the open menu.


  <a href="#">
    <!-- First icon is visible when Speed Dial actions are closed -->
    <i class="icon f7-icons">add</i>
    <!-- Second icon is visible when Speed Dial actions are opened -->
    <i class="icon f7-icons">close</i>
  </a>
  <!-- Speed Dial action buttons -->
  <div class="fab-buttons fab-buttons-bottom">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

Speed dial buttons container position is configured via additional class:

fab-buttons-top - buttons will appear on top of FAB
fab-buttons-right - buttons will appear on right of FAB
fab-buttons-bottom - buttons will appear on bottom of FAB
fab-buttons-left - buttons will appear on left of FAB
fab-buttons-center - buttons will appear around of FAB
Note that Speed Dial actions buttons will appear in reversed order
You shouldn’t use more than 6 Speed Dial actions
You should use at least 3 Speed Dial actions

Speed Dial With Labels

Speed dial buttons also support additional text labels. In this case layout will be a bit extended:

FAB Morph

<div class="page">
  <!-- Toolbar has additional required "fab-morph-target" class -->
  <div class="toolbar fab-morph-target">
    ...
  </div>
  <!-- FAB will morph to toolbar -->
  <div class="fab fab-morph" data-morph-to=".toolbar">
    <i class="icon f7-icons">add</i>
  </div>
  <div class="page-content">
    ...
  </div>
</div>

Where

data-morph-to - additional attribute on FAB where target element’s CSS selector must be specified. In this example it points to Toolbar
fab-morph-target - additional required class on FAB morph target, in this example it is added to Toolbar

FAB App Methods

We can use following app methods to control FABs:

FAB will fire the following DOM events on FAB element:

Event	Target	Description
fab:open	FAB Element<div class=”fab”>	Event will be triggered on FAB open or when it morphs to target element
fab:close	FAB Element<div class=”fab”>	Event will be triggered on FAB close or when it morphs back from target element

Control FAB With Links

It is possible to open and close required FAB (if you have it in DOM) using special classes and data attributes on links:

To open FAB speed dial actions we need to add **fab-open** class to any HTML element (prefered to link)
To close FAB speed dial or to morph FAB back from target we need to add **fab-close** class to any HTML element (prefered to link)

Floating Action Button / FAB