Avatar

Gli avatar rappresentano utenti o entità tramite immagini, icone o caratteri.

Utilizzo

Importa il componente:

import 'mdui/components/avatar.js';

Importa il tipo TypeScript:

import type { Avatar } from 'mdui/components/avatar.js';

Esempio:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

Esempi

Avatar con immagine

Usa l'attributo src per impostare un'immagine come avatar, oppure inserisci direttamente un elemento <img> nello slot predefinito.

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

<mdui-avatar>
  <img src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4" alt="Esempio di immagine profilo"/>
</mdui-avatar>

Sorgente

L'attributo fit determina il modo in cui l'immagine si adatta al contenitore. Funziona in modo simile alla proprietà nativa object-fit.

Avatar con icona

Usa l'attributo icon per impostare un'Icona Material per l'avatar. Oppure, passa un elemento icona nello slot predefinito.

<mdui-avatar icon="people_alt"></mdui-avatar>

<mdui-avatar>
  <mdui-icon name="people_alt"></mdui-icon>
</mdui-avatar>

Sorgente

Avatar con testo

Puoi usare qualsiasi testo nello slot predefinito come avatar.

<mdui-avatar>A</mdui-avatar>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`src`	`src`	`string`	-
URL dell'immagine dell'avatar
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Come l'immagine si adatta al contenitore, equivalente alla proprietà nativa `object-fit`. I valori opzionali includono: `contain`: mantiene le proporzioni originali dell'immagine, ridimensionando il contenuto in modo proporzionale `cover`: mantiene le proporzioni originali dell'immagine, ma il contenuto potrebbe essere ritagliato `fill`: valore predefinito, non mantiene le proporzioni originali, il contenuto viene allungato per riempire l'intero contenitore `none`: mantiene le dimensioni originali dell'immagine, il contenuto non viene ridimensionato né allungato `scale-down`: mantiene le proporzioni originali dell'immagine, le dimensioni del contenuto corrispondono al valore più piccolo tra `none` e `contain`
`icon`	`icon`	`string`	-
Nome dell'icona Material per l'avatar
`label`	`label`	`string`	-
Testo alternativo per l'avatar

Slots

Nome
(predefinito)
Contenuto personalizzato dell'avatar: lettere, caratteri, elementi `<img>`, icone, ecc.

CSS Parts

Nome
`image`
Quando si utilizza un'immagine come avatar, l'elemento `<img>` all'interno del componente
`icon`
Quando si utilizza un'icona come avatar, l'elemento `<mdui-icon>` all'interno del componente

CSS Custom Property

Nome
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.

Capitolo precedente

Altri

Capitolo successivo

Badge