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 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>
<!-- Floating 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>
This feature is supported only in Material Theme
If you want to open Popover by tapping on FAB, then you can use FAB that morphs to Popover to add more fancy transition.
In this case we need to add additional floating-button-to-popover
class to FAB itself:
<div class="page navbar-fixed">
...
<!-- Floating Action Button
"open-popover" class to open popover
"floating-button-to-popover" class to open popover with morph transition
data-popover=".demo-popver" to specify which popover to open
-->
<a href="#" class="floating-button floating-button-to-popover open-popover color-purple">
<i class="icon icon-plus"></i>
</a>
...
</div>
...
<!-- Popover -->
<div class="popover demo-popover">
<div class="popover-inner">
<div class="list-block">
<ul>
<li>
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Link 1</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Link 2</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Link 3</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
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.
In this case we need to wrap FAB with <div class="speed-dial">...</div>
and follow this layout:
<div class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="center">FAB Speed Dial</div>
</div>
</div>
<!-- Speed Dial Wrap -->
<div class="speed-dial">
<!-- FAB inside will open Speed Dial actions -->
<a href="#" class="floating-button">
<!-- First icon is visible when Speed Dial actions are closed -->
<i class="icon icon-plus"></i>
<!-- Second icon is visible when Speed Dial actions are opened -->
<i class="icon icon-close"></i>
</a>
<!-- Speed Dial Actions -->
<div class="speed-dial-buttons">
<!-- First Speed Dial button -->
<a href="#">
<i class="icon demo-icon-email"></i>
</a>
<!-- Second Speed Dial button -->
<a href="#">
<i class="icon demo-icon-calendar"></i>
</a>
<!-- Third Speed Dial button -->
<a href="#">
<i class="icon demo-icon-upload"></i>
</a>
</div>
</div>
<!-- End of Speed Dial -->
<div class="page-content">...</div>
</div>
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