FAB

Creating a FAB menu (Floating Action Button) is useful if you want to group some actions inside the same button.

To create your FAB menu, you have to create a first .fab div.
This .fab must contain an element with a data-target referring to the fab id which is going to trigger the .fab-menu. 

<div class="fab" id="fab-example" data-ax="fab">

  <!-- Here is the fab-trigger -->
  <button class="btn shadow-1 btn-circle btn-large secondary" data-target="fab-example">
    <span class="iconify-inline" data-icon="mdi:plus"></span>
  </button>

  <!-- Here is the fab-menu -->
  <div class="fab-menu">
    <button class="btn shadow-1 btn-circle orange dark-1 text-white fab-item mb-3">
      <span class="iconify-inline" data-icon="mdi:pencil"></span>
    </button>
    <button class="btn shadow-1 btn-circle red fab-item mb-3">
      <span class="iconify-inline" data-icon="mdi:send"></span>
    </button>
    <button class="btn shadow-1 btn-circle primary fab-item mb-3">
      <span class="iconify-inline" data-icon="mdi:download"></span>
    </button>
  </div>
</div>

Javascript initialization#

Once HTML was setup, you can activate the FAB menu with this simple code.
Just pass the id of your FAB that you want to activate. 

// NOTE: this is NOT to be used if data-ax="fab" is set in your HTML
let fab = new Axentix.Fab('#fab-example');

// With options
let fab = new Axentix.Fab('#fab-example', {
  hover: true,
  direction: 'top',
  position: 'bottom-right',
  offsetY: '8%'
});
To know all the ways to initialize a JS component, please read the JS Init page.

Options#

Property Default value Description
animationDuration 300 Opening and closing animation duration in ms.
hover true When 'hover' is set to true, the data-target element will trigger the .fab-menu on hover instead of click.
direction top Set the appearance direction of the .fab-menu.
Accepted values are 'top' 'bottom' 'left' and 'right'.
position bottom-right Change the position of the FAB.
Accepted values are 'bottom-right' 'bottom-left' 'top-right' and 'top-left'.
offsetX 1rem Add a spacing on the X axis (if the position is set to 'bottom-right' the offsetX will automatically add the offset on the right).
offsetY 1.5rem Add a spacing on the Y axis (if the position is set to 'bottom-right' the offsetX will automatically add the offset on the bottom).

Methods#

// NOTE: this is NOT to be used if data-ax="fab" is set in your HTML
let fab = new Axentix.Fab('#fab-example');

// Syntax : fab.{method}
fab.open();
Method Description
.open() Open fab
.close() Close fab

Events#

// Listen to all fab instances
document.addEventListener('ax.fab.open', function() {
  // open event !
});

// Listen to only one fab instance
let fabQuery = document.querySelector('#example-fab');
fabQuery.addEventListener('ax.fab.open', function() {
  // open event only on #example-fab
});
Event Description
ax.fab.setup Event sent when the FAB has been setup.
ax.fab.open Event sent when the open() method is called.
ax.fab.close Event sent when the close() method is called.

Styling#

CSS Variable Default value Description
--ax-fab-z-index 200 FAB z-index.