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.

    There are following components included:

    • - 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
    EventDescription
    <f7-fab> events
    clickEvent will be triggered after click on FAB
    <f7-fab-button> events
    clickEvent will be triggered after click on FAB Speed Dial button
    • 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

    With Backdrop

    1. <f7-page>
    4.   <f7-fab-backdrop slot="fixed"></f7-fab-backdrop>
    6.   <!-- FAB Right Bottom -->
    7.   <f7-fab position="right-bottom" slot="fixed">
    8.     <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    9.     <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
    10.     <f7-fab-buttons position="top">
    11.       <f7-fab-button label="Action 1">1</f7-fab-button>
    12.       <f7-fab-button label="Action 2">2</f7-fab-button>
    13.     </f7-fab-buttons>
    14.   </f7-fab>
    16.   <f7-block>
    17.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias ... voluptatibus eligendi.</p>