Floating Action Button

Floating Action Button is supported only in Material Theme

Floating action buttons 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.

Layout

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

<!-- Page-->
<div class="page navbar-fixed">
  <!-- Navbar-->
  <div class="navbar">
    <div class="navbar-inner">
      <div class="center">Floating Action Button</div>
    </div>
  </div>
  <!-- Floatin Action Button -->
  <a href="#" class="floating-button color-pink">
    <i class="icon icon-plus"></i>
  </a>
  <!-- Scrollable Page Content-->
  <div class="page-content">
    <div class="content-block">
      Lorem ipsum dolor sit amet, ....
    </div>
  </div>
</div>

实例预览