Il FAB (Floating Action Button) è un pulsante sospeso, solitamente posizionato nell'angolo inferiore destro dello schermo. Serve per evidenziare un'azione principale, come aggiungere un elemento, aprire un modulo o avviare una funzione.

Come funziona?
Il componente non va inserito all'interno di una section.
All'interno dell'editor della pagina desiderata, cliccare su "Drag components here" e selezionare il componente Fab. Una volta aggiunto, personalizzare il contenuto.

Nella configurazione delle Properties del componente Fab, è possibile personalizzare diversi elementi:

• Type of Content: questa opzione definisce il comportamento del pulsante. È possibile selezionare una delle seguenti opzioni:

Page (Predefinito) → Il pulsante rimanda a un’ancora specifica sulla pagina.

Popup Modale → Il pulsante apre un popup modale personalizzato.

Popup Form Lead → Il pulsante apre direttamente un modulo di contatto, senza necessità di specificare un URL di ancoraggio.

• Anchor URL:
  Se è selezionata l’opzione Page, è necessario inserire un Anchor URL (*) che indica la destinazione del Fab (Esempio: #form_GA porterà l’utente direttamente al form situato in fondo alla pagina)

• Text Backgroud Color: questa opzione consente di impostare il colore dello sfondo del testo all’interno del pulsante
• Hide Text: selezionando questa casella, il testo all’interno del pulsante verrà nascosto, lasciando solo l’icona visibile
• ID: È possibile assegnare un ID univoco al componente Fab tramite l’attributo HTML id per personalizzarlo tramite CSS o per riferimento nel codice.
  
  

Oltre alle Properties, il componente Fab consente di personalizzare l'icona (Icon) visualizzata all'interno del pulsante.

Opzioni di configurazione delle Icone:

         1- Icona principale (Icon)

Questa è l'icona standard visibile quando il pulsante Fab è inattivo.

È possibile scegliere un'icona dalla libreria, caricare un file personalizzato o modificare l’icona predefinita.

Azioni disponibili:
Edit → Modifica l’icona attuale.
Clear → Rimuove l’icona selezionata.
Pick → Seleziona un'icona dalla libreria

2- Icona quando cliccato (Icon When Clicked).

Questa opzione permette di definire un’icona alternativa che viene mostrata quando l’utente interagisce con il pulsante Fab.

Se non viene selezionata un’icona diversa, il sistema utilizza la stessa icona principale.

Le opzioni di modifica (Edit, Clear, Pick) funzionano nello stesso modo della Icona principale