Statut
Component checklist
Usage
<dsa-profile-button first-name="Bruce" family-name="Wayne"></dsa-profile-button>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/profile-button/profile-button.js';
</script>
Code HTML à implémenter pour utiliser le composant bouton
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleLabel accessible-label |
Fournit un libellé textuel alternatif au bouton pour une meilleure accessibilité. Par défaut le aria-label du bouton est "{{prénom}} {{nom}} - Menu utilisateur". |
string |
'' |
|
displayMode display-mode |
Permet de choisir l'affichage du bouton (full : avatar + name + caret, minimal : avatar + caret, mobile : avatar) |
'full' | 'minimal' | 'mobile' |
'full' |
|
familyName family-name |
Nom de famille de l'utilisateur |
string
|
'' |
|
firstName first-name |
Prénom de l'utilisateur |
string |
'' |
|
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 |
'' |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
blur() |
Enlève le focus du bouton |
() => void |
|
click()
|
Simule un click sur le bouton |
() => void |
|
focus() |
Met le focus sur le bouton |
(options?: FocusOptions) => void |
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> |
Références
Voici la liste des références vers les composants liés :