Component – Floating Action Button

A floating button representing the primary page action.Download + DemoView DemoDownload ComponentHow to
The Floating Action Button component is used to display a fixed-positioned button that triggers the main page action.
The tooltip element is fully c…


This content originally appeared on CodyHouse and was authored by CodyHouse

A floating button representing the primary page action.Floating Action Button

Download + Demo

How to

The Floating Action Button component is used to display a fixed-positioned button that triggers the main page action.

The tooltip element is fully customizable: you can use it to include, for example, a navigation. The component will auto-change the size of the tooltip: it will morph from the size of the button to the size determined by its content. Only the final tooltip width is set updating the --fab-popover-width variable (past the @xs breakpoint; before it, the width is 100%). 

Button Position #

The FAB component can be placed in one of the 4 corners adding one of the following class variations:

  • .fab--bottom-right
  • .fab--bottom-left
  • .fab--top-right
  • .fab--top-left

The vertical gap (distance between the button and the top/bottom of the viewport) is determined by the --fab-gap-y variable; the distance from the left/right of the viewport depends on the max-width utility class applied to the .container: 

<div class="fab fab--bottom-right js-fab"> <!-- ? -->
  <div class="position-relative container max-width-sm height-100%"> <!-- ? -->
    <button class="reset fab__btn js-tab-focus js-fab__btn" aria-label="Toggle popover">
      <!-- ... -->
    </button>
  </div>
</div>

Button Icons #

When the button is clicked, it triggers the icon transition. To change the icons, replace the two SVG .fab__icon elements (you can use inline SVG, SVG symbols, or icon fonts).

<button class="reset fab__btn js-tab-focus js-fab__btn">
  <span class="fab__icon-wrapper">
    <svg class="icon fab__icon" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
  </span>

  <span class="fab__icon-wrapper">
    <svg class="icon fab__icon" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
  </span>
</button>

Visibility Offset #

Optionally, you can hide the FAB and show it only if a specific condition is met:

  • show the banner when a specific element leaves the viewport: add the data-target-in attribute and set it equal to a unique selector of the trigger element;
  • show the banner after the window has scrolled of a specific amount of pixels: add the data-offset-in attribute and set it equal to the amount in pixels. This can be combined with the data-target-in attribute;
  • hide the banner when a specific element enters the viewport: add the data-target-out attribute and set it equal to a unique selector of the trigger element;
  • hide the banner after the window has scrolled of a specific amount of pixels: add the data-offset-out attribute and set it equal to the amount in pixels. This can be combined with the data-target-out attribute.
<div class="fab fab--bottom-right js-fab" data-offset-in="200">
  <!-- ... -->
</div>


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-08-02T07:53:09+00:00) Component – Floating Action Button. Retrieved from https://www.scien.cx/2021/08/02/component-floating-action-button/

MLA
" » Component – Floating Action Button." CodyHouse | Sciencx - Monday August 2, 2021, https://www.scien.cx/2021/08/02/component-floating-action-button/
HARVARD
CodyHouse | Sciencx Monday August 2, 2021 » Component – Floating Action Button., viewed ,<https://www.scien.cx/2021/08/02/component-floating-action-button/>
VANCOUVER
CodyHouse | Sciencx - » Component – Floating Action Button. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/02/component-floating-action-button/
CHICAGO
" » Component – Floating Action Button." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/08/02/component-floating-action-button/
IEEE
" » Component – Floating Action Button." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/08/02/component-floating-action-button/. [Accessed: ]
rf:citation
» Component – Floating Action Button | CodyHouse | Sciencx | https://www.scien.cx/2021/08/02/component-floating-action-button/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts