-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- 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 |
|
position | string | right-bottom | FAB position. Can be one of the following:
|
morph-to | string | String CSS selector of the FAB morph target | |
<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 |
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 |
Examples
Default FAB
<f7-page>
<!-- FAB must be direct child of a page -->
<f7-fab color="pink" @click="doSomething">
<f7-icon f7="add"></f7-icon>
</f7-fab>
...
</f7-page>
Renders to:
...
<div class="fab fab-right-bottom color-pink">
<a href="#">
<i class="icon f7-icons">add</i>
</a>
</div>
...
Speed Dial
<f7-page>
<!-- FAB must be direct child of a page -->
<f7-fab color="pink" @click="doSomething">
<!-- First icon is visible when Speed Dial actions are closed -->
<f7-icon f7="add"></f7-icon>
<!-- Second icon is visible when Speed Dial actions are opened -->
<f7-icon f7="close"></f7-icon>
<!-- Speed Dial Buttons -->
<f7-fab-buttons>
<f7-fab-button color="orange" @click="onButtonClick">A</f7-fab-button>
<f7-fab-button color="green" @click="onButtonClick">B</f7-fab-button>
<f7-fab-button color="blue" @click="onButtonClick">C</f7-fab-button>
</f7-fab-buttons>
</f7-fab>
...
</f7-page>
Renders to:
...
<div class="fab fab-right-bottom color-pink">
<a href="#">
<i class="icon f7-icons">add</i>
<i class="icon f7-icons">close</i>
</a>
<div class="fab-buttons fab-buttons-top">
<a href="#" class="color-orange">A</a>
<a href="#" class="color-green">B</a>
<a href="#" class="color-blue">C</a>
</div>
</div>
...