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.

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.

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

Method Description
.open() Open fab
.close() Close fab

Events

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.