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.
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. |
