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 a .fab-trigger which is gonna 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.

Property	Default value	Description
animationDuration	300	Opening and closing animation duration in ms.
hover	true	When `'hover'` is set to true, the `.fab-trigger` 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).

Method	Description
.open()	Open fab
.close()	Close 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.