-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
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.
FAB 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-->
<div class="navbar">
<div class="navbar-inner">
<div class="center">Floating Action Button</div>
</div>
</div>
<!-- Floating Action Button -->
<div class="fab fab-right-bottom">
<a href="#">
<i class="icon f7-icons">add</i>
</a>
</div>
<!-- Another Floating Action Button -->
<div class="fab fab-left-bottom">
<a href="#">
<i class="icon f7-icons">add</i>
</a>
</div>
<!-- Scrollable Page Content-->
<div class="page-content">
<div class="block">
Lorem ipsum dolor sit amet, ....
</div>
</div>
</div>
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 -->
<div class="fab fab-right-bottom color-green"></div>
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:
<!-- Additional fab-extended class -->
<div class="fab fab-extended fab-center-bottom">
<a href="#">
<i class="icon f7-icons">add</i>
<!-- Element with FAB text -->
<div class="fab-text">Create</div>
</a>
</div>
Speed Dial
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 add additional element with buttons:
<div class="fab fab-right-bottom">
<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 FABfab-buttons-right
- buttons will appear on right of FABfab-buttons-bottom
- buttons will appear on bottom of FABfab-buttons-left
- buttons will appear on left of FABfab-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:
<div class="fab-buttons fab-buttons-bottom">
<!-- additional "fab-label-button" class on fab button -->
<a href="#" class="fab-label-button">
<!-- original button content -->
<span>1</span>
<!-- button label -->
<span class="fab-label">Action 1</span>
</a>
<a href="#" class="fab-label-button">
<span>2</span>
<span class="fab-label">Action 2</span>
</a>
...
</div>
FAB Morph
There is also ability for FAB to morph to any visible element on page.
<div class="page">
<div class="navbar">...</div>
<!-- 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 Toolbarfab-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:
app.fab.open(fabEl, targetEl) | Open FAB speed dial actions/buttons, or morph it to specified target
|
app.fab.close(fabEl) | Close FAB speed dial actions/buttons, or morph it back from specified target
|
app.fab.toggle(fabEl) | Toggle FAB speed dial actions/buttons
|
FAB Events
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) -
If you have more than one FAB in DOM, you need to specify appropriate FAB via additional
data-fab=".some-fab"
attribute on this HTML element
Examples
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Floating Action Button</div>
</div>
</div>
<!-- Toolbar FAB Morph Target -->
<div class="toolbar toolbar-bottom-md fab-morph-target">
<div class="toolbar-inner">
<!-- Each Toolbar link will close FAB (morph back) on click -->
<a class="link fab-close">Link 1</a>
<a class="link fab-close">Link 2</a>
<a class="link fab-close">Link 3</a>
</div>
</div>
<!-- FAB Left Top (Yellow) -->
<div class="fab fab-left-top color-yellow">
<a href="#">
<!-- Icons For iOS Theme -->
<i class="icon f7-icons ios-only">add</i>
<i class="icon f7-icons ios-only">close</i>
<!-- Icons For MD Theme -->
<i class="icon material-icons md-only">add</i>
<i class="icon material-icons md-only">close</i>
</a>
<!-- FAB speed dial actions -->
<div class="fab-buttons fab-buttons-bottom">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
</div>
</div>
<!-- FAB Right Top (Pink) -->
<div class="fab fab-right-top color-pink">
...
<div class="fab-buttons fab-buttons-left">
...
</div>
</div>
<!-- FAB Center (Green) -->
<div class="fab fab-center-center color-green">
...
<div class="fab-buttons fab-buttons-center">
...
</div>
</div>
<!-- FAB Left Bottom (Blue) -->
<!-- Will morph to Toolbar -->
<div class="fab fab-left-bottom fab-morph color-blue" data-morph-to=".toolbar">
...
</div>
<!-- FAB Right Bottom (Orange) -->
<div class="fab fab-right-bottom">
...
<!-- FAB speed dial actions with labels -->
<div class="fab-buttons fab-buttons-top">
<a href="#" class="fab-label-button">
<span>1</span>
<span class="fab-label">Action 1</span>
</a>
<a href="#" class="fab-label-button">
<span>2</span>
<span class="fab-label">Action 2</span>
</a>
</div>
</div>
<!-- Extended FAB Center Bottom (Red) -->
<div class="fab fab-extended fab-center-bottom color-red">
<a href="#">
<i class="icon f7-icons ios-only">add</i>
<i class="icon material-icons md-only">add</i>
<div class="fab-text">Create</div>
</a>
</div>
<div class="page-content">
<div class="block">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>