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 element
f7-fab-buttons - wrapper for multiple FAB buttons used as Speed Dial FAB
f7-fab-button - single FAB Speed Dial button
f7-fab-backdrop - FAB backdrop element

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: `right-bottom` `center-bottom` `left-bottom` `right-center` `center-center` `left-center` `right-top` `center-top` `left-top`
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
tooltip-trigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover`, `click` or `manual`
<f7-fab-buttons> properties
position	string	top	Speed dial buttons position, can be one of the following: `top` - buttons will appear on top of FAB `right` - buttons will appear on right of FAB `bottom` - buttons will appear on bottom of FAB `left` - buttons will appear on left of FAB `center` - buttons will appear around of FAB
<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
tooltip-trigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover`, `click` or `manual`

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 is f7-fab-buttons, then it will be inserted in the end of the main FAB element
link - child element will be inserted inside of the main FAB link <a> element
root - child element will be inserted in the end of the main FAB element
text - child element will be inserted in the text element of the Extended FAB

Examples

fab.vue

<template>
  <f7-page>
    <f7-navbar title="Floating Action Button"></f7-navbar>

    <template #fixed>
      <f7-fab position="right-top">
        <f7-icon ios="f7:plus" md="material:add"></f7-icon>
        <f7-icon ios="f7:xmark" 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>

      <f7-fab position="right-bottom">
        <f7-icon ios="f7:plus" md="material:add"></f7-icon>
        <f7-icon ios="f7:xmark" 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-button label="Third Action">3</f7-fab-button>
        </f7-fab-buttons>
      </f7-fab>

      <f7-fab position="left-bottom">
        <f7-icon ios="f7:plus" md="material:add"></f7-icon>
        <f7-icon ios="f7:xmark" md="material:close"></f7-icon>
        <f7-fab-buttons position="top">
          <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>

      <f7-fab position="left-top">
        <f7-icon ios="f7:plus" md="material:add"></f7-icon>
        <f7-icon ios="f7:xmark" 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>

      <f7-fab position="center-center">
        <f7-icon ios="f7:plus" md="material:add"></f7-icon>
        <f7-icon ios="f7:xmark" 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>

      <f7-fab position="center-bottom" text="Create">
        <f7-icon ios="f7:plus" md="material:add"></f7-icon>
      </f7-fab>
    </template>

    <f7-block>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus
        eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam
        neque ducimus! Quasi, numquam.
      </p>
      <p>
        Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut
        laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur
        quam eaque, voluptate laboriosam unde.
      </p>
      <p>
        Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores
        odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio
        laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.
      </p>
      <p>
        Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam
        illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia,
        rerum placeat nobis est.
      </p>
      <p>
        Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore
        voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa
        obcaecati aspernatur odio assumenda veniam, ipsum alias.
      </p>
    </f7-block>
    <f7-block>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque
        dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis
        officia at quas dolorem earum!
      </p>
      <p>
        Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora
        minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis
        necessitatibus aut odit aliquam adipisci.
      </p>
      <p>
        Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga
        veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum
        cumque at. Adipisci sint, iusto blanditiis ullam? Vel?
      </p>
      <p>
        Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur
        expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit
        cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.
      </p>
      <p>
        Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus,
        labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat
        eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?
      </p>
      <p>
        Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat
        cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae
        blanditiis. Voluptas unde deleniti quisquam, nobis?
      </p>
      <p>
        Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam
        facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui
        mollitia facere. Nostrum esse recusandae voluptatibus eligendi.
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Fab,
  f7FabButtons,
  f7FabButton,
  f7Icon,
  f7Block,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Fab,
    f7FabButtons,
    f7FabButton,
    f7Icon,
    f7Block,
  },
};
</script>

FAB Morph

fab-morph.vue

<template>
  <f7-page>
    <f7-navbar title="Floating Action Button Morph"></f7-navbar>
    <f7-toolbar tabbar icons bottom class="fab-morph-target">
      <f7-link
        tab-link
        tab-link-active
        icon-ios="f7:envelope_fill"
        icon-md="material:email"
        text="Inbox"
      />
      <f7-link tab-link icon-ios="f7:calendar_fill" icon-md="material:today" text="Calendar" />
      <f7-link
        tab-link
        icon-ios="f7:cloud_upload_fill"
        icon-md="material:file_upload"
        text="Upload"
      />
    </f7-toolbar>
    <f7-fab position="right-bottom" morph-to=".toolbar.fab-morph-target">
      <f7-icon ios="f7:plus" md="material:add"></f7-icon>
    </f7-fab>
    <f7-fab position="left-bottom" morph-to=".demo-fab-sheet.fab-morph-target">
      <f7-icon ios="f7:plus" md="material:add"></f7-icon>
    </f7-fab>
    <f7-fab position="center-bottom" morph-to=".demo-fab-fullscreen-sheet.fab-morph-target">
      <f7-icon ios="f7:plus" md="material:add"></f7-icon>
    </f7-fab>
    <template #fixed>
      <div class="list links-list demo-fab-sheet fab-morph-target">
        <ul>
          <li><a class="fab-close">Link 1</a></li>
          <li><a class="fab-close">Link 2</a></li>
          <li><a class="fab-close">Link 3</a></li>
          <li><a class="fab-close">Link 4</a></li>
        </ul>
      </div>
      <div class="demo-fab-fullscreen-sheet fab-morph-target">
        <f7-block-title>Choose Something</f7-block-title>
        <div class="list links-list">
          <ul>
            <li><a class="fab-close">Link 1</a></li>
            <li><a class="fab-close">Link 2</a></li>
            <li><a class="fab-close">Link 3</a></li>
            <li><a class="fab-close">Link 4</a></li>
          </ul>
        </div>
      </div>
    </template>
    <f7-block>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus
        eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam
        neque ducimus! Quasi, numquam.
      </p>
      <p>
        Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut
        laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur
        quam eaque, voluptate laboriosam unde.
      </p>
      <p>
        Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores
        odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio
        laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.
      </p>
      <p>
        Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam
        illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia,
        rerum placeat nobis est.
      </p>
      <p>
        Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore
        voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa
        obcaecati aspernatur odio assumenda veniam, ipsum alias.
      </p>
    </f7-block>
    <f7-block>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque
        dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis
        officia at quas dolorem earum!
      </p>
      <p>
        Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora
        minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis
        necessitatibus aut odit aliquam adipisci.
      </p>
      <p>
        Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga
        veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum
        cumque at. Adipisci sint, iusto blanditiis ullam? Vel?
      </p>
      <p>
        Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur
        expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit
        cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.
      </p>
      <p>
        Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus,
        labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat
        eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?
      </p>
      <p>
        Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat
        cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae
        blanditiis. Voluptas unde deleniti quisquam, nobis?
      </p>
      <p>
        Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam
        facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui
        mollitia facere. Nostrum esse recusandae voluptatibus eligendi.
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Block,
  f7Toolbar,
  f7Fab,
  f7Icon,
  f7Link,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7Toolbar,
    f7Fab,
    f7Icon,
    f7Link,
  },
};
</script>

Improve this Doc

On this page

FAB Components
FAB Properties
FAB Events
FAB Slots
Examples