Avatar

Le composant Avatar permet de représenter une personne, un objet ou une entité. Il peut prendre plusieurs formes, comme des images, des icônes ou des caractères.

Utilisation

Importez le composant :

import 'mdui/components/avatar.js';

Importez le type TypeScript correspondant :

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

Exemple d'utilisation :

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

Exemples

Avatar avec image

Vous pouvez spécifier une URL d'image avec l'attribut src, ou placer un élément <img> dans le slot par défaut.

<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="Exemple d'avatar image"/>
</mdui-avatar>

Source

Utilisez l'attribut fit pour définir la façon dont l'image s'ajuste au conteneur, de la même manière que la propriété CSS object-fit native.

Avatar avec icône

Utilisez l'attribut icon pour spécifier une icône Material Icons comme avatar, ou fournissez un élément d'icône dans le slot par défaut.

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

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

Source

Avatar avec un caractère

Tout texte placé dans le slot par défaut peut servir d'avatar.

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

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`src`	`src`	`string`	-
URL de l'image de l'avatar
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Comment l'image s'adapte au conteneur, identique à la propriété `object-fit` native. Les valeurs possibles incluent : `contain` : Préserve les proportions de l'image, le contenu est mis à l'échelle de manière proportionnelle `cover` : Préserve les proportions de l'image, mais une partie du contenu peut être rognée `fill` : Valeur par défaut, ne préserve pas les proportions, le contenu est étiré pour remplir tout le conteneur `none` : Conserve la taille d'origine de l'image, le contenu n'est pas mis à l'échelle ou étiré `scale-down` : Préserve les proportions de l'image, la taille du contenu est la plus petite entre `none` et `contain`
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons pour l'avatar
`label`	`label`	`string`	-
Description textuelle alternative pour l'avatar

Slots

Nom
Défaut
Contenu personnalisé de l'avatar, peut être des lettres, des caractères chinois, un élément `<img>`, une icône, etc.

CSS Parts

Nom
`image`
Élément `<img>` interne utilisé lorsque l'avatar affiche une image
`icon`
Élément `<mdui-icon>` interne utilisé lorsque l'avatar affiche une icône

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

Chapitre précédent

Autres

Chapitre suivant

Badge