Fab
fw-fab
A Floating Action Button (FAB) that stays fixed on the screen. Supports a single primary action or a "speed dial" menu of multiple actions.
Usage
HTML (Auto-init)
Create a container with the fw-fab class. It will automatically position itself at the bottom-right.
HTML
<div class="fw-fab">
<button class="fw-fab-trigger"><i class="fw-icon" data-icon="plus"></i></button>
</div>
<script>FormWidgets.autoInit();</script>JavaScript Initialization (Speed Dial)
Initialize with actions to create a speed dial menu.
JavaScript
FormWidgets.init('#myFab', 'Fab', {
position: 'bottom-right',
icon: 'plus',
actions: [
{ icon: 'edit', onClick: () => console.log('Edit') },
{ icon: 'share', onClick: () => console.log('Share') },
{ icon: 'trash', onClick: () => console.log('Delete') }
]
});Options
| Option | Type | Default | Description |
|---|---|---|---|
| position | string | 'bottom-right' | Screen position. Options: 'bottom-right', 'bottom-left', 'top-right', 'top-left'. |
| icon | string | 'plus' | Name of the main trigger icon. |
| toggleIcon | string | 'close' | Icon to show when the menu is open (for speed dials). Set to null to disable toggling. |
| actions | array | [] | Array of action objects: { icon: 'name', label: 'Text', onClick: fn }. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-position | position | data-position="bottom-left" |
Methods
widget.toggle()
Toggles the speed dial menu open or closed.
Features
Fixed Positioning
Stays visible while scrolling. Configurable to any corner.
Speed Dial
Expandable menu for secondary actions.
Icon Toggle
Automatically switches icon (e.g. + to x) when opened.
Themable
Uses primary brand colors for the main trigger.