j-Avatar

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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.

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.

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>