j-Avatar

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Podporuje témata
Je to singleton
Inspirace z react-user-avatar

Témata:

Komponenta Avataru musí zaregistrovat vlastní téma. obsahuje téma default.

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

Možnosti mohou obsahovat:

size {Číslo} Volitelné, velikost v pixelů (předvolené: 100)
lighten {Číslo} Volitelně, barva písma bude osvětleno jasným faktorem barvy pozadí (předběžné: 80 | od -255 do 255
radius {Číslo} Volitelné, jak okrúhlé hranice budou (předvolené: 50)
background {Hex} Volitelná, nastavená barva pozadí (podle předvolby: vybraná z barev Array)
color {Hex} Volitelná, nastavená barva písma (podle předvolby: vytvořená z pozadí barvy světlem)
font {String} Volitelné, nastavené písemné rodiny (předvolené: Arial)
weight {String} Volitelné, písemná hmotnost (předvolené: bold)
class {String} Volitelné, tato vlastnost parfémů toggleClass pro tuto třídu

Použití:

Každý prvek avataru musí obsahovat třídu avatar, jako je tento: <div class="avatar">.

data-a="THEME_NAME" Volitelné, může obsahovat název tématu (podle předvolby: default)
data-a-url="URL_TO_PICTURE" Volitelné, může obsahovat URL pro uživatelskou fotografii
data-a-class="class_for_toggle_effect" Volitelné, může obsahovat třídu pro efekt toggleClass

Jednotka musí obsahovat uživatelské jméno, například:

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

Dobré vědět:

Avatar se automaticky připojuje ke všem novým avatám
SETTER('avatar', 'refresh') se vyvíjí

Použijte ji s <ui-component name="avatar">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle výchozího nastavení). autor: Denis Granec. zdroj: The Componentator Výrobce je autorizován, MIT licence.

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>