Avatar

Le composant avatar est une représentation visuelle de l'utilisateur qui intègre une image ou une initiale.

Component checklist

Statut

Fonctionnel

Code source

Storybook

Dernière version de modification

2.15.0

Disponible depuis la version

1.0.0

Usage

Exemples d'intégration de l'accordéon sur différents framework:


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-avatar label="Profil"> </dsa-avatar>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/avatar/avatar.js';
                                                                                                                                                          import type { DSAAvatar } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant avatar


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import { Component } from '@angular/core';
                                                                                                                                                        import type { DSAAvatar } from '@ds-autonomie/web-components';
                                                                                                                                                        import '@ds-autonomie/web-components/dist/components/avatar/avatar.js';
                                                                                                                                                        
                                                                                                                                                        @Component({
                                                                                                                                                          selector: 'app-root',
                                                                                                                                                          templateUrl: './app.component.html',
                                                                                                                                                          styleUrls: ['./app.component.css']
                                                                                                                                                        })
                                                                                                                                                        export class AppComponent {}
                                                                                                                                                        
                                                                                                                                                            

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-avatar label="Profil"> </dsa-avatar>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/avatar/avatar.js';
                                                                                                                                                          import type { DSAAvatar } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

app.component.html

 


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

image

L'url de l'image à utiliser pour l'avatar

string

''

initials

Initiales à utiliser comme solution de secours lorsqu'aucune image n'est disponible (1-2 charactères max)

string

''

label

Un label utilisé pour décrire l'avatar aux dispositifs d'assistance

string

''

loading

Indique comment le navigateur doit charger l'image

eager lazy

eager

size

La taille de l'avatar

small medium large x-large

medium

Méthodes

Slots

Nom

Description

icon

L'icône par défaut à utiliser lorsqu'aucune image ou initiale n'est présente. Fonctionne mieux avec <dsa-icon>

Événements