AX - Menu a Pulsanti

Panoramica

AX - Menu a pulsante è un componente di Experience Cloud che visualizza un menu a discesa quando gli utenti cliccano un pulsante nelle pagine dei siti Experience.

Usalo per raggruppare azioni correlate o opzioni di navigazione sotto un unico pulsante—come azioni dell'account utente, collegamenti rapidi, opzioni di esportazione o azioni sui record. Configura gli elementi del menu manualmente o estraili dinamicamente dai dati di Salesforce in Experience Builder.

Perfetto per una navigazione compatta, menu di overflow, azioni del profilo utente, operazioni in blocco o qualsiasi luogo in cui hai bisogno di più opzioni senza ingombrare la pagina con pulsanti separati.

Impostazioni del menu a pulsante

Il componente Menu a pulsante ti permette di creare un menu a discesa attivato dal click su un pulsante. Ecco come puoi personalizzarlo per adattarlo alle esigenze del tuo sito:

Etichetta

• Cosa fa: Imposta il testo che appare sul pulsante.

• Esempio: "Navigazione," "Azioni," "Scopri di più."

Icona

• Cosa fa: Aggiunge un'icona visiva al pulsante.

• Come usare: Scegli tra le icone disponibili nel Lightning Design System.

• Opzionale: Puoi lasciarlo vuoto se non vuoi un'icona.

Stile del pulsante

• Cosa fa: Modifica l'aspetto del pulsante per adattarlo al look & feel del tuo sito.

• Opzioni:

  • Neutro

  • Brand

  • Distruttivo (per azioni come eliminare)

  • Successo (per azioni positive)

  • Altro...

Regolare le impostazioni di aspetto ti permette di personalizzare ulteriormente l'aspetto del pulsante. Ad esempio, puoi scegliere la variante "Container" per cambiare il colore di sfondo del pulsante a tuo piacimento o selezionare il token di colore predefinito per il tuo sito.

Allineamento del menu

• Cosa fa: Determina dove appare il menu a discesa rispetto al pulsante.

• Opzioni:

  • Sinistra

  • Destra

  • Centro

  • In basso a sinistra

  • Altro...

Trigger del menu

• Cosa fa: Controlla come si apre il menu.

• Opzioni:

  • Click

  • Hover (apre al passaggio del mouse)

  • Focus (apre al focus da tastiera)

Trigger del menu impostato su Hover

Tooltip

• Cosa fa: Mostra informazioni utili quando gli utenti passano il mouse sul pulsante.

• Opzionale: Lascia vuoto se non è necessaria alcuna spiegazione aggiuntiva.

Nascondi freccia verso il basso

• Cosa fa: Rimuove la freccia rivolta verso il basso solitamente mostrata sui pulsanti del menu.

• Opzionale: Seleziona questa casella se preferisci un aspetto più pulito.

Allunga a tutta larghezza

• Cosa fa: Fa espandere il pulsante per occupare tutta la larghezza disponibile.

• Opzionale: Seleziona questa casella se vuoi un pulsante più grande.

Disabilita pulsante

• Cosa fa: Rende temporaneamente il pulsante e il menu non utilizzabili.

• Opzionale: Seleziona questa casella per impedire agli utenti di interagirvi.

Nubbin del menu

• Il nubbin del menu è un piccolo e sottile triangolo accanto agli elementi del menu all'interno di un menu a pulsante.

• Collega visivamente l'elemento del menu al pulsante che apre il menu, guidando lo sguardo dell'utente.

• Questo aiuta gli utenti a identificare rapidamente quale elemento del menu è associato a un particolare pulsante, migliorando l'esperienza utente complessiva.

Elementi del menu

• Cosa fa: Definisce i collegamenti o le azioni nel menu a discesa.

• Come usare: Aggiungi elementi con etichette (il testo visualizzato) e un'icona se necessario.

Imposta la navigazione dell'elemento

Per rendere interattivo il tuo menu a pulsante, dovrai indicare a ogni elemento del menu dove andare quando qualcuno ci clicca. Questo si fa nella sezione "Collega a". Puoi saperne di più sui diversi tipi di azioni che puoi attivare dal menu a pulsante qui.

---

Impostazioni di aspetto

Queste impostazioni ti consentono di personalizzare visivamente il tuo menu a pulsante per abbinarlo al design e al branding del tuo sito.

Spaziatura

• Cosa fa: Controlla lo spazio attorno al pulsante.

• Come usare: Usa cursori o input numerici per regolare i valori di spaziatura superiori, inferiori, sinistri e corretti.

Etichetta e icona

• Colore: Scegli il colore predefinito per quando il pulsante è attivo (cliccato o al passaggio del mouse), e un colore per l'hover.

• Famiglia di font: Seleziona il font per il testo dell'etichetta (es. Arial, Times New Roman, Verdana).

• Dimensione del font: Regola la dimensione del testo dell'etichetta usando un cursore o un input numerico.

• Stile del font: Scegli testo normale, corsivo o obliquo.

• Peso del font: Rendi il testo leggero, normale, medio, grassetto o extra grassetto.

• Allineamento orizzontale: Decidi se l'icona dovrebbe essere a sinistra o a destra del testo dell'etichetta.

Sfondo

• Colore: Scegli il colore predefinito per lo sfondo del pulsante quando è attivo e il colore di hover quando è inattivo.

Bordo

Scegli il colore predefinito per quando il pulsante è attivo e il colore di hover per il bordo attorno al pulsante.

• Dimensione: Regola lo spessore del bordo usando un cursore o un input numerico.

• Stile: Scegli tra un bordo solido, tratteggiato, puntinato o doppio.

• Raggio: Puoi regolare l'arrotondamento degli angoli usando un cursore o un input numerico (un valore più alto rende gli angoli più arrotondati).

Immagine (per elementi del menu)

• Bordo colore: Scegli il colore del bordo intorno alle immagini degli elementi del menu (se presente).

• Dimensione: Regola la dimensione delle immagini degli elementi del menu usando un cursore o un input numerico.

• Stile: Scegli uno stile normale, corsivo o obliquo per le didascalie delle immagini (se presenti).

• Raggio: Regola l'arrotondamento degli angoli delle immagini degli elementi del menu usando un cursore o un input numerico.

• Adattamento dell'oggetto: Decidi come l'immagine dovrebbe adattarsi al suo contenitore (es. fill, contain, cover).

Considerazioni importanti

• Stile: Personalizza l'aspetto del menu a pulsante per abbinarlo al branding del tuo sito.

• Collega a: Considera l'aggiunta dell'interazione "Collega a" per gestire le interazioni degli utenti con gli elementi del menu.