# AX - Avatar
## Panoramica
**AX - Avatar** è un componente di Experience Cloud che visualizza immagini del profilo, iniziali o icone nelle pagine dei siti Experience per rappresentare utenti, contatti, account o qualsiasi record Salesforce.
Usalo per mostrare i profili degli utenti del portale, i rappresentanti degli account, le liste di contatti o gli identificatori di entità con uno stile visivo coerente. Il componente visualizza automaticamente le immagini quando disponibili o ricorre alle iniziali o alle icone.
Perfetto per intestazioni di profili utente, elenchi di membri della community, directory dei contatti o in qualsiasi punto in cui gli utenti del portale necessitino di un'identificazione visiva di persone o entità.
***
## Personalizzare l'Avatar
Il componente Avonni Avatar ti aiuta a creare rappresentazioni visivamente coerenti di utenti o entità all'interno del tuo sito Salesforce Experience Cloud. Ecco una guida passo-passo per personalizzare l'Avatar in base alle tue esigenze:
### **Visualizzare le iniziali**
Il componente Avatar offre flessibilità nel modo in cui visualizzi le iniziali:
#### **Inserimento manuale**
Se conosci le iniziali che desideri visualizzare, inseriscile direttamente nel campo "Initials".
#### **Generazione dinamica (Espressioni)**
Per rendere dinamici i tuoi componenti Avonni, puoi usare [Experience Cloud Expressions](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi#expressions). Ad esempio, nel componente Avatar qui sotto puoi usare la seguente espressione per visualizzare automaticamente il nome dell'utente attualmente connesso:
```
{!User.Record.Name}
```
Puoi sostituire `Nome` con il nome effettivo del campo che memorizza il nome dell'utente nella tua organizzazione Salesforce.
Se desideri generare automaticamente le iniziali a partire da un nome completo, abilita l'opzione "Initials Auto Formatted". Questo utilizzerà le espressioni di Experience Cloud per estrarre e formattare la prima lettera di ogni parola nel nome.
Visualizzare le iniziali dinamicamente dal nome dell'utente corrente
### **Immagine personalizzata**
Aggiungi una foto del profilo, un logo o qualsiasi immagine per rendere l'Avatar immediatamente riconoscibile. Carica la tua immagine utilizzando l'opzione **Selected Content** — il componente la ritaglia e la formatta automaticamente per adattarla alla forma dell'Avatar.
Se non viene aggiunta alcuna immagine, l'Avatar visualizza invece le iniziali
### **Variante (Forma)**
Scegli tra **cerchio** o **quadrato** usando il campo **Variante** per adattarsi al design del tuo portale. Gli avatar circolari funzionano bene per le persone, mentre le forme quadrate sono adatte a loghi o icone di entità
### **Dimensione**
Controlla quanto grande appare l'Avatar nella pagina utilizzando la **Dimensione** proprietà. Le opzioni vanno da **x-small** a **xx-large**, così puoi bilanciarlo con il contenuto circostante—più piccolo per elenchi in linea, più grande per intestazioni di profili.
### **Testo primario e secondario**
Visualizza un contesto aggiuntivo accanto all'Avatar aggiungendo campi di testo. Usa **Primary Text** per l'informazione più importante (come un nome completo) e **Secondary Text** per dettagli di supporto (come ruolo o email).
Puoi anche impostare gli stili dei caratteri per ogni livello di testo per creare una gerarchia visiva tra le informazioni primarie e secondarie.
### **Tag**
Aggiungi etichette visive per categorizzare o evidenziare informazioni relative all'Avatar. I tag appaiono come piccoli distintivi e possono essere stilizzati con colori diversi utilizzando l'opzione **Tag Variant** —utile per mostrare stato, dipartimento, ruolo o qualsiasi identificatore rapido.
***
## **Esempi di casi d'uso**
**Profili utente** – Crea intestazioni di profilo complete combinando un'immagine personalizzata con il testo primario per il nome dell'utente e il testo secondario per il loro ruolo o dipartimento. Questo offre agli utenti del portale una rappresentazione chiara e professionale nelle loro pagine profilo.
**Forum della community** – Visualizza gli Avatar accanto a post e commenti in modo che i membri della community possano identificare rapidamente chi contribuisce. Questo aggiunge un tocco personale che incoraggia il coinvolgimento e rende le conversazioni più facili da seguire.
**Pagine del team** – Mostra i membri del team con Avatar che includono nomi, ruoli e tag per dipartimento o competenza. Questo aiuta gli utenti del portale a trovare il contatto giusto e a comprendere la struttura del team a colpo d'occhio.
***
## Attiva una finestra di conferma dopo l'interazione. Essenziale per azioni che richiedono la conferma o l'accettazione dell'utente.
{% tabs %}
{% tab title="Proprietà" %}
| Nome | Descrizione |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Iniziali** | Inserisci iniziali specifiche da visualizzare all'interno dell'Avatar. Ti permette di definire manualmente le lettere rappresentative per un utente o un'entità |
| **Initials Auto Formatted** | Questa funzione genera e visualizza automaticamente le iniziali basandosi su un nome completo fornito, garantendo una rappresentazione coerente senza input manuale |
| **Nome icona di riserva** | Determina l'icona di backup da mostrare nell'Avatar quando i dati principali (come un'immagine o le iniziali) sono assenti, garantendo continuità visiva |
| **Dimensione** | Regola le dimensioni complessive dell'Avatar per adattarlo a diversi contesti dell'interfaccia utente |
| **Variante** | Scegli tra una forma circolare (`cerchio`) o una quadrata (`quadrato`) per l'Avatar in modo da allinearlo alle tue preferenze di design |
| **Nascondi dettagli dell'Avatar** | Attiva per mostrare o nascondere dettagli aggiuntivi associati all'Avatar, come testi o tag |
| **Primary Text** | Il testo principale visualizzato accanto all'Avatar, spesso usato per nomi o identificatori principali |
| **Stile del testo primario** | Designa lo stile del carattere per il testo primario, scegliendo tra opzioni come Heading 1-4 o Paragraph 1-2 |
| **Secondary Text** | Testo aggiuntivo visualizzato sotto il testo primario, adatto per informazioni supplementari o sottotitoli |
| **Stile del testo secondario** | Definisci lo stile del carattere per il testo secondario, con scelte che vanno da Heading 1-4 a Paragraph 1-2 |
| **Testo terziario** | Testo di terzo livello, tipicamente usato per dettagli aggiuntivi o attributi relativi all'Avatar |
| **Stile del testo terziario** | Scegli lo stile di carattere desiderato per il testo terziario, con opzioni che includono Heading 1-4 e Paragraph 1-2 |
| **Posizione del testo** | Specifica l'allineamento o il posizionamento dei testi di accompagnamento in relazione all'Avatar, consentendo un migliore layout visivo |
| **Tag** | Imposta le proprietà per eventuali tag distintivi associati all'Avatar, fornendo un modo per aggiungere marcatori o indicatori categoriali ai tuoi Avatar |
| {% endtab %} | |
{% tab title="Aspetto" %}
| Attributo | Nome della proprietà | Descrizione | Valori possibili |
| ------------------- | --------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------- |
| **Primary Text** | Colore del testo primario | Imposta il colore del testo principale all'interno dell'Avatar | Valori di colore standard, classi di utilità colore |
| **Primary Text** | Dimensione del carattere del testo primario | Modifica la dimensione del testo primario | Valori di dimensione del carattere (es., 12px, 1rem) |
| **Primary Text** | Stile del carattere del testo primario | Controlla lo stile del carattere (es., italic, oblique) | Opzioni standard di stile del carattere |
| **Primary Text** | Peso del carattere del testo primario | Definisce lo spessore (boldness) del testo primario | Valori di peso del carattere (es., normal, bold) |
| **Secondary Text** | Colore del testo secondario | Imposta il colore del testo supplementare | Valori di colore standard, classi di utilità colore |
| **Secondary Text** | Dimensione del carattere del testo secondario | Modifica la dimensione del testo secondario | Valori di dimensione del carattere (es., 12px, 1rem) |
| **Secondary Text** | Stile del carattere del testo secondario | Controlla lo stile del carattere (es., italic, oblique) | Opzioni standard di stile del carattere |
| **Secondary Text** | Peso del carattere del testo secondario | Definisce lo spessore (boldness) del testo secondario | Valori di peso del carattere (es., normal, bold) |
| **Testo terziario** | Colore del testo terziario | Imposta il colore del testo di terzo livello | Valori di colore standard, classi di utilità colore |
| **Testo terziario** | Dimensione del carattere del testo terziario | Modifica la dimensione del testo terziario | Valori di dimensione del carattere (es., 12px, 1rem) |
| **Testo terziario** | Stile del carattere del testo terziario | Controlla lo stile del carattere (es., italic, oblique) | Opzioni standard di stile del carattere |
| **Testo terziario** | Peso del carattere del testo terziario | Definisce lo spessore (boldness) del testo terziario | Valori di peso del carattere (es., normal, bold) |
| **Icona** | Colore di sfondo dell'icona | Imposta il colore di sfondo dell'area dell'icona | Valori di colore standard, classi di utilità colore |
| **Icona** | Colore in primo piano dell'icona | Imposta il colore dell'immagine dell'icona o delle iniziali | Valori di colore standard, classi di utilità colore |
| **Icona** | Utilità colore in primo piano dell'icona | Applica uno schema di colore predefinito all'icona | Nomi specifici delle classi di utilità |
| **Icona** | Adattamento dell'oggetto immagine dell'icona | Controlla come un'immagine icona si adatta al suo spazio | fill, contain, cover, none, scale-down |
| **Bordo** | Dimensione del bordo | Specifica la larghezza del bordo dell'Avatar | Valori in pixel (es., 1px, 2px) |
| **Bordo** | Raggio del bordo | Controlla la rotondità degli angoli dell'Avatar | Valori in pixel, % (es., 50% per un cerchio) |
| **Bordo** | Colore del bordo | Imposta il colore del bordo dell'Avatar | Valori di colore standard, classi di utilità colore |
| **Bordo** | Stile del bordo | Definisce l'aspetto del bordo (es., solid, dashed) | Stili standard di bordo CSS |
| **Iniziali** | Colore delle iniziali | Imposta il colore del testo per le iniziali visualizzate | Valori di colore standard, classi di utilità colore |
| **Iniziali** | Colore delle iniziali al passaggio del mouse | Colore delle iniziali quando l'Avatar è in hover | Valori di colore standard, classi di utilità colore |
| **Iniziali** | Peso del carattere delle iniziali | Controlla lo spessore del testo delle iniziali | Valori di peso del carattere (es., normal, bold) |
| **Iniziali** | Colore dell'entità | Colore di sfondo quando le iniziali vengono generate | Valori di colore standard, classi di utilità colore |
| **Iniziali** | Peso del carattere dell'entità | Peso del carattere delle iniziali generate da un'entità | Valori di peso del carattere (es., normal, bold) |
| {% endtab %} | | | |
| {% endtabs %} | | | |
