AX - Gruppo di Pulsanti
Panoramica
AX - Gruppo di Pulsanti è un componente di Experience Cloud che visualizza più pulsanti correlati insieme come un gruppo unificato nelle pagine dei siti Experience.
Usalo per presentare azioni correlate affiancate — come "Salva" e "Annulla", "Modifica" e "Elimina", o opzioni di navigazione per diverse sezioni. I pulsanti rimangono visivamente connessi come un'unica unità, rendendo chiaro che sono scelte correlate.
Perfetto per azioni di moduli, opzioni di gestione dei record, navigazione tipo schede, o in qualsiasi contesto in cui gli utenti del portale devono scegliere tra più azioni correlate.
Configurazione del Gruppo di Pulsanti
Segui questi passaggi per adattare il componente Avonni Button Group al design e alla funzionalità del tuo sito Experience Cloud in modo perfetto:
Impostazioni Chiave
Visualizza come riga
Abilita questa impostazione per disporre i pulsanti orizzontalmente nello schermo. Disattivandola i pulsanti verranno impilati verticalmente.
Pulsanti visibili
Questa impostazione determina il numero massimo di pulsanti visibili direttamente sullo schermo. Se hai più pulsanti del numero specificato, quelli rimanenti verranno messi in un comodo menu a discesa.
Menu dei Pulsanti
Etichetta: Imposta il testo visualizzato sul pulsante che apre il menu a discesa contenente pulsanti aggiuntivi.
Nome icona: Nel menu dei pulsanti, seleziona un'icona appropriata (consulta Salesforce Lightning Design System per le icone disponibili).
Variante: Scegli lo stile visivo per il menu dei pulsanti (es. 'neutral', 'brand', 'inverse').
Allineamento del Menu: Seleziona come sarà posizionato il menu a discesa rispetto al pulsante ('left' o 'right').
Pulsanti
Etichetta: Inserisci il testo che vuoi appaia sul pulsante.
Nome icona: Se vuoi, scegli un'icona da posizionare sul pulsante.
Posizione icona: Specifica se l'icona deve essere a 'left' o a 'right' dell'etichetta del pulsante.
Variante: Puoi selezionare l'aspetto del pulsante dagli stili predefiniti ('neutral', 'brand', 'destructive', ecc.).
Disabilitato: Abilita questa impostazione se desideri che il pulsante inizi in uno stato disabilitato, impedendo l'interazione dell'utente.
Nascosto: Abilita questa impostazione se desideri che il pulsante sia inizialmente nascosto alla vista.
Interazione al Click: Questa sezione cruciale ti permette di definire cosa succede quando un utente clicca sul pulsante. Consulta la pagina di documentazione "On Click Interactions" per un elenco completo delle possibili azioni e configurazioni.
Considerazioni Importanti
Progetta il tuo Gruppo di Pulsanti con una chiara gerarchia visiva in mente. Usa la variante 'brand' per enfatizzare le azioni primarie.
Usa la variante 'destructive' con parsimonia per azioni che hanno conseguenze significative.
Assicurati che le etichette dei pulsanti siano concise e descrivano accuratamente la loro funzione.
Testa sempre accuratamente la configurazione del tuo Gruppo di Pulsanti su diversi dispositivi e browser per garantire un'esperienza utente ottimale.
Aspetto e Stile
Il componente Avonni Button Group offre opzioni di stile complete per personalizzare il suo aspetto all'interno del tuo sito Experience Cloud. Di seguito è riportata una suddivisione degli attributi di stile disponibili:
Etichetta/Icona
colore: Imposta il colore predefinito del testo o dell'icona.
colore attivo: Imposta il colore del testo o dell'icona quando il pulsante è attivo (cliccato o focalizzato).
colore al passaggio: Imposta il colore del testo o dell'icona quando l'utente passa il mouse sopra il pulsante.
famiglia del font: Specifica il font da utilizzare per il testo del pulsante.
dimensione del font: Controlla la dimensione del testo del pulsante.
stile del font: Imposta lo stile del font (es. normal, italic, oblique).
peso del font: Determina lo spessore del testo del pulsante (es. normal, bold, bolder).
Sfondo
colore: Imposta il colore di sfondo predefinito del pulsante.
colore attivo: Imposta il colore di sfondo quando il pulsante è attivo.
colore al passaggio: Imposta il colore di sfondo quando l'utente passa il mouse sopra il pulsante.
Bordo
colore: Imposta il colore del bordo predefinito.
colore attivo: Imposta il colore del bordo quando il pulsante è attivo.
colore al passaggio: Imposta il colore del bordo quando l'utente passa il mouse sopra il pulsante.
dimensione: Controlla la larghezza del bordo.
stile: Specifica lo stile del bordo (es. solid, dashed, dotted).
Esempio di Utilizzo
Per creare un gruppo di pulsanti con sfondo rosso, testo bianco e un sottile effetto al passaggio, considera la seguente configurazione:
Note Importanti
Usa un selettore di colori web o un generatore per trovare i codici colore desiderati.
Cerca di mantenere coerenza con il design generale e lo schema di colori del tuo sito Experience Cloud.
Testa sempre le modifiche di stile per garantire l'effetto visivo desiderato e l'accessibilità.
Ultimo aggiornamento
È stato utile?