Floating Action Button Vue Component

Floating action buttons 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.

Usage examples

Floating action button

<f7-fab color="pink" @click="doSomething">
  <f7-icon icon="icon-plus"></f7-icon>
</f7-fab>

Renders to:

<a href="#" class="floating-action-button color-pink">
  <i class="icon icon-plus"></i>
</a>

Speed Dial

<f7-fab-speed-dial>
  <!-- Actions -->
  <f7-fab-actions>
    <f7-fab-action color="pink" @click="onActionClick">A</f7-fab-action>
    <f7-fab-action color="orange" @click="onActionClick">B</f7-fab-action>
    <f7-fab-action color="green" @click="onActionClick">C</f7-fab-action>
  </f7-fab-actions>
  <!-- FAB -->
  <f7-fab>
    <!-- First icon to open Actions -->
    <f7-icon icon="icon-plus"></f7-icon>
    <!-- Second icon to close Actions -->
    <f7-icon icon="icon-close"></f7-icon>
  </f7-fab>
</f7-fab-speed-dial>

Renders to:

<div class="speed-dial">
  <!-- Actions -->
  <div class="speed-dial-buttons">
    <a href="#" class="pink">A</a>
    <a href="#" class="orange">B</a>
    <a href="#" class="green">C</a>
  </div>
  <!-- FAB -->
  <a href="#" class="floating-action-button color-pink">
    <i class="icon icon-plus"></i>
    <i class="icon icon-close"></i>
  </a>
</div>

Properties