# AX - Schede

## Panoramica

**AX - Schede** è un componente di Experience Cloud che organizza i contenuti in schede etichettate sulle pagine dei siti Experience, permettendo agli utenti del portale di passare tra diverse sezioni senza lasciare la pagina.

Usalo per organizzare contenuti correlati che non devono essere tutti visibili contemporaneamente—come dettagli di prodotto distribuiti su più schede, moduli a più sezioni, risorse categorizzate o informazioni raggruppate. Scegli layout di schede orizzontali o verticali e configura lo stile in Experience Builder.

Perfetto per pagine informative sui prodotti, moduli multi-step, categorie di risorse, sezioni account o in qualsiasi posto il tuo portale debba organizzare contenuti in viste commutabili.&#x20;

{% hint style="danger" %}
Questo componente [sfrutta gli slot](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi#understanding-slots) per una personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.
{% endhint %}

## Tutorial

Prossimamente

## Impostazioni

{% tabs %}
{% tab title="🎛️ Proprietà" %}

| Nome                                                                                 | Descrizione                                                                                                                                                          | Utilizzo                                                                                                                                                                            |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Orientamento**                                                                     | Imposta l'orientamento delle schede, scegliendo tra un layout orizzontale o verticale.                                                                               | Seleziona l'orientamento che meglio si adatta alle tue esigenze di design, ottimizzando il layout per la navigazione dell'utente e la visibilità dei contenuti.                     |
| **Scoped**                                                                           | Abilita lo styling scoped per un'applicazione di stile più mirata e specifica alle schede.                                                                           | Utilizza questa funzione per applicare stili confinati al componente, evitando conflitti di styling non voluti con altri elementi della pagina.                                     |
| **Scorrevole e pulsanti di scorrimento**                                             | Rendi le schede scorrevoli e gestisci la visibilità dei pulsanti di scorrimento, garantendo una navigazione facile anche con un numero maggiore di schede.           | Configura le funzioni di scorrimento in base alla quantità e al layout delle schede, assicurando che gli utenti possano facilmente accedere e navigare tutte le schede disponibili. |
| **Immagine di sfondo del contenuto CMS o URL dell'immagine di sfondo del contenuto** | Personalizza lo sfondo dell'area contenuto della scheda scegliendo un'immagine dal CMS o fornendo un URL.                                                            | Migliora l'appeal visivo delle tue schede applicando un'immagine di sfondo che completi il design complessivo e la presentazione dei contenuti.                                     |
| **Fonte dati**                                                                       | Definisci la fonte delle etichette e dei contenuti delle schede, permettendo la configurazione manuale delle proprietà delle schede come etichette, icone e tooltip. | Utilizza questa funzione per personalizzare i dati delle schede, garantendo che ogni scheda sia etichettata correttamente e arricchita con icone o tooltip secondo necessità.       |
| {% endtab %}                                                                         |                                                                                                                                                                      |                                                                                                                                                                                     |

{% tab title="🎨 Stile" %}

| Nome                                 | Descrizione                                                                                                                           |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Impostazioni di dimensione**       | Definisci la larghezza e l'altezza delle schede, assicurando che si adattino perfettamente al tuo layout.                             |
| **Stili di sfondo e bordo**          | Personalizza sfondi e bordi con opzioni come colori e dimensioni, migliorando la distinzione visiva di ogni scheda.                   |
| **Stili delle schede**               | Regola vari aspetti come allineamento verticale, larghezza, altezza e spaziatura per perfezionare l'aspetto e il layout delle schede. |
| **Stili di etichetta e sottotitolo** | Adatta l'aspetto del testo all'interno delle schede, applicando colori e stili di font per migliorare leggibilità e appeal estetico.  |
| **Stili del pulsante di overflow**   | Personalizza l'aspetto del pulsante di overflow, regolando i colori del testo e dello sfondo per coerenza visiva.                     |
| {% endtab %}                         |                                                                                                                                       |
| {% endtabs %}                        |                                                                                                                                       |
