# j-Avatar

> Le composant Avatar doit enregistrer votre propre thème. Il contient le thème par défaut.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 98aee0f1ff7adfca3469ebef5fa05a954734ac8362ef6e69f0207ae62531071e
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- prend en charge les thèmes
- c'est un singleton
- inspiration de `react-user-avatar`

__Thèmes__ :

Le composant Avatar doit enregistrer votre propre thème. Il contient le thème `default`.

```javascript
SETTER(true, 'avatar', 'register', 'THEME_NAME', 'options')
```

Les options peuvent contenir :

- `size` {Numéro} optionnel, une taille en pixels (defaut: `100`)
- `lighten` {Numéro} Optionnellement, la couleur de la lettre sera éclairée par le facteur de couleur de fond éclairé (défaut: `80` | de -255 à 255)
- `radius` {Numéro} Optionnel, comment les cornes de la frontière seront rondées (defaut: `50`)
- `background` {Hex} couleur de fond optionnelle (défaut: sélectionnée parmi les couleurs `Array`)
- `color` {Hex} couleur de caractère optionnelle (defaut: générée par la couleur d'arrière-plan par le lumineux)
- `font` {String} Optionnelle, la famille de caractères fixes (defaut: `Arial`)
- `weight` {String} Optionnel, poids de texte (defaut: `bold`)
- `class` {String} Optionnel, cette propriété parfume `toggleClass` pour cette classe

__Utilisation__ :

Chaque élément d'avatar doit contenir la classe `avatar` comme suit: `<div class="avatar">`.

- `data-a="THEME_NAME"` optionnel, peut contenir un nom de thème (defaut: `default`)
- `data-a-url="URL_TO_PICTURE"` optionnel, peut contenir une URL pour la photo de l'utilisateur
- `data-a-class="class_for_toggle_effect"` optionnel, peut contenir une classe pour l'effet `toggleClass`

L'élément doit contenir un nom d'utilisateur, par exemple:

- `<div class="avatar">Peter Širka</div>` ou
- `<a href="#" class="avatar">Peter Širka</a>`

__Bon à savoir__ :

- Le composant d'avatar relie automatiquement tous les nouveaux avatars.
- `SETTER('avatar', 'refresh')` réfrigère

Utilisez-le avec `<ui-component name="avatar">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Denis Granec. Source : le référentiel de composants Componentator, licence MIT.

```html example.html
<ui-component name="avatar"></ui-component>

<a href="https://www.totaljs.com" class="avatar hidden" data-a-class="hidden" data-a-url="https://scontent.fbts5-1.fna.fbcdn.net/v/t1.0-9/12552918_10209045123711641_5810437084053575333_n.jpg?oh=f0d9f5acdbab2f1f2cf165bf9aed8da5&oe=5A3F378D">Peter Širka</a>
<div class="avatar hidden" data-a-class="hidden">Martin Smola</div>
<div class="avatar hidden" data-a-class="hidden" data-a-url="https://avatars3.githubusercontent.com/u/7585285?v=4&s=460">Denis Granec</div>
<div class="avatar hidden" data-a-class="hidden">Denis Oliver</div>
<div class="avatar hidden" data-a="black">Kristle Leverone</div>
<div class="avatar hidden" data-a="black">Denis</div>
<div class="avatar hidden" data-a="black">Peter</div>

<script>
	// Registers a new theme
	SETTER(true, 'avatar/register', 'black', 'background:black;color:white;class:hidden');
</script>
```