# AX - Button Group ## 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: ``` Etichetta/Icona: colore: bianco colore al passaggio: #f5f5f5 Sfondo: colore: rosso Bordo: colore: rosso ``` ### **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à. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-button-group.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.