-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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 elementf7-fab-buttons
- wrapper for multiple FAB buttons used as Speed Dial FABf7-fab-button
- single FAB Speed Dial button
FAB Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-fab> properties | |||
href | string 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 |
|
target | string | Value of link target attribute, e.g. _blank , _self , etc. |
|
position | string | right-bottom | FAB position. Can be one of the following:
|
morph-to | string | String CSS selector of the FAB morph target | |
text | string | FAB Button text. If specified, then it will be displayed as Extended Fab with text label | |
tooltip | string | FAB tooltip text to show on button hover/press | |
<f7-fab-buttons> properties | |||
position | string | top | Speed dial buttons position, can be one of the following:
|
<f7-fab-button> properties | |||
fab-close | boolean | false | When enabled then clicking on this button will close the FAB |
target | string | Value of link target attribute, e.g. _blank , _self , etc. |
|
label | string | Button text label | |
tooltip | string | Button tooltip text to show on button hover/press |
FAB Events
Event | Description |
---|---|
<f7-fab> events | |
click | Event will be triggered after click on FAB |
<f7-fab-button> events | |
click | Event 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 isf7-fab-buttons
, then it will be inserted in the end of the main FAB elementlink
- child element will be inserted inside of the main FAB link<a>
elementroot
- child element will be inserted in the end of the main FAB elementtext
- 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-md 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:add" md="material:add"></f7-icon>
<f7-icon ios="f7:close" 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:add" md="material:add"></f7-icon>
<f7-icon ios="f7:close" 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:add" md="material:add"></f7-icon>
<f7-icon ios="f7:close" 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:add" md="material:add"></f7-icon>
<f7-icon ios="f7:close" md="material:close"></f7-icon>
</f7-fab>
<!-- FAB Right Bottom (Orange) -->
<f7-fab position="right-bottom" slot="fixed" color="orange">
<f7-icon ios="f7:add" md="material:add"></f7-icon>
<f7-icon ios="f7:close" 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:add" 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>