j-Avatar

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Ondersteunt thema's
Het is een singleton
Inspiratie van react-user-avatar

Thema’s:

Avatar component moet uw eigen thema registreren. het bevat default thema.

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

Opties kunnen bevatten:

size {Nummer} Optie, een grootte in pixels (default: 100)
lighten {Nummer} Optie, de letterkleur zal worden verlicht door een lichtgevende achtergrondkleur factor (default: 80 | van -255 tot 255)
radius {Nummer} Optie, hoe rond de grenshoeken zullen zijn (default: 50)
background {Hex} Optie, achtergrondkleur (default: geselecteerd uit kleuren Array)
color {Hex} Optioneel, ingestelde letterkleur (de standaard: gemaakt van achtergrondkleur door licht)
font {String} Optioneel, ingestelde lettertype (default: Arial)
weight {String} Optioneel, lettergewicht (default: bold)
class {String} Optie, deze eigenschap parfums toggleClass voor deze klasse

Gebruik:

Elk element van de avatar moet avatar-klasse bevatten zoals hier: <div class="avatar">.

data-a="THEME_NAME" Optie, kan een thema naam bevatten (default: default)
data-a-url="URL_TO_PICTURE" Optie, kan een URL voor gebruikersfoto bevatten
data-a-class="class_for_toggle_effect" optioneel, kan een klasse voor het effect van toggleClass bevatten

Het element moet een gebruikersnaam bevatten, bijvoorbeeld:

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

Goed om te weten:

Avatar component verbindt alle nieuwe avatars in alle nieuwe componenten automatisch
SETTER('avatar', 'refresh') verfrissing

Gebruik het met <ui-component name="avatar">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator CDN door standaard). auteur: Denis Granec. bron: de Componentator Componenten repository, MIT licentie.

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>