Panoramica
Visualizza un personaggio assistente a partire da una forma del corpo, un viso, un colore della palette e una dimensione. Il componente visualizza i valori forniti; la selezione e la persistenza sono gestite dall’applicazione.Utilizzo
Opzioni visive
Scegli le forme indipendentemente dalle espressioni e dai colori.
Il corpo e il viso utilizzano i token del tema della palette selezionata e seguono il tema chiaro o scuro circostante. Imposta
size per un personaggio quadrato. Gli attributi nativi, gli eventi, className, style e ref sono applicati allo span esterno; gli stili espliciti sovrascrivono le relative dimensioni e i valori predefiniti della palette.
Accessibilità
Il personaggio è decorativo quando non ha un nome accessibile, come nell’esempio di utilizzo con etichetta. Per un personaggio autonomo, fornisciaria-label o aria-labelledby; l’elemento radice espone quindi il ruolo immagine. Il corpo e il viso restano nascosti alla tecnologia assistiva affinché il personaggio venga annunciato una sola volta.
Imposta esplicitamente aria-hidden quando devi sovrascrivere l’impostazione predefinita basata sul nome, ad esempio per nascondere un personaggio con nome accanto a testo visibile equivalente.
Inserisci il personaggio all’interno di un pulsante o link con nome quando accompagna un’azione. L’applicazione gestisce il controllo, la relativa etichetta e il relativo comportamento.
Props
Explicitly hides or exposes the character. Takes precedence over the name-based default.
string
Accessible name for a standalone character. Adds the image role; omit it beside a visible name.
string
ID of an element naming a standalone character. Adds the image role.
string
CSS class applied to the span root.
"blue" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "sky" | "turquoise" | "yellow"
predefinito:"blue"
Theme palette used for the body and face. Follows the surrounding light or dark theme.
"default" | "happy" | "love" | "sleepy" | "surprised" | "wink"
predefinito:"default"
Expression displayed over the body.
boolean
predefinito:"false"
Plays the selected expression’s idle loop. Displays the static expression when the browser prefers reduced motion.
"arch" | "burst" | "circle" | "cloud" | "clover" | "cookie" | "flower" | "gem" | "hexagon" | "pill"
predefinito:"circle"
Body shape of the assistant character.
14 | 16 | 20 | 24 | 40
predefinito:"24"
Width and height in pixels: 14, 16, 20, 24, or 40.
CSSProperties
Inline styles applied to the root. Explicit styles override its dimensions and palette defaults.