j-Avatar

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

unterstützt Themen
Es ist Singleton
Inspiration von react-user-avatar

Themen:

Die Avatar-Komponente muss Ihr eigenes Thema registrieren. Es enthält das Thema default.

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

Optionen können Folgendes enthalten:

size {Number} Optional, eine Größe in Pixel (Standard: 100)
lighten {Number} Optional, die Schriftfarbe wird um den Aufhellungsfaktor der Hintergrundfarbe aufgehellt (Standard: 80 | von -255 bis 255)
radius {Number} Optional, wie abgerundete Rahmenecken sein werden (Standard: 50)
background {Hex} Optional, Hintergrundfarbe festlegen (Standard: ausgewählt aus den Farben Array)
color {Hex} Optional, Schriftfarbe festlegen (Standard: wird durch Aufhellen aus der Hintergrundfarbe generiert)
font {String} Optional, Schriftartfamilie festlegen (Standard: Arial)
weight {String} Optional, Schriftstärke (Standard: bold)
class {String} Optional, diese Eigenschaft führt toggleClass für diese Klasse aus

Verwendung:

Jedes Element des Avatars muss die Klasse avatar wie folgt enthalten: <div class="avatar">. Hier sind benutzerdefinierte Attribute:

data-a="THEME_NAME" Optional, kann einen Themennamen enthalten (Standard: default)
data-a-url="URL_TO_PICTURE" Optional, kann eine URL für das Benutzerfoto enthalten
data-a-class="class_for_toggle_effect" Optional, kann eine Klasse für den toggleClass-Effekt enthalten

Das Element muss einen Benutzernamen enthalten, zum Beispiel:

<div class="avatar">Peter Širka</div> oder
<a href="#" class="avatar">Peter Širka</a>

Gut zu wissen:

Die Avatar-Komponente bindet alle neuen Avatare automatisch in alle neuen Komponenten
SETTER('avatar', 'refresh') führt eine Aktualisierung durch

Verwenden Sie es mit <ui-component name="avatar">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback (standardmäßig das CDN Componentator) herunter. Autor: Denis Granec. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>