j-Avatar

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

podporuje témy
je to singleton
inšpirácia zo react-user-avatar

Témy:

Komponent Avatar potrebuje zaregistrovať vašu vlastnú tému. Obsahuje tému default.

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

Možnosti môžu obsahovať:

size {Číslo} Voliteľné, veľkosť v pixeloch (predvolené: 100)
lighten {Číslo} Opcionálne, farba písma bude osvetlená jasným faktorom farby pozadia (predvolené: 80 | od -255 do 255)
radius {Číslo} Voliteľné, ako sa okrúhle hraničné rohy budú (predvolené: 50)
background {Hex} Voliteľná, nastavená farba pozadia (predvolená: vybraná z farieb Array)
color {Hex} Voliteľná, nastavená farba písma (predvolená: generovaná z farby pozadia svetlom)
font {String} Voliteľné, nastavená rodina písma (predvolené: Arial)
weight {String} Voliteľné, písomná hmotnosť (predvolené: bold)
class {String} Voliteľné, tento vlastnosť parfémy toggleClass pre túto triedu

Použitie:

Každý prvok avatára musí obsahovať triedu avatar takto: <div class="avatar">.

data-a="THEME_NAME" Voliteľné, môže obsahovať názov témy (predvolené: default)
data-a-url="URL_TO_PICTURE" Možné, môže obsahovať URL pre užívateľskú fotografiu
data-a-class="class_for_toggle_effect" Voliteľné, môže obsahovať triedu pre efekt toggleClass

Element musí obsahovať užívateľské meno, napríklad:

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

Je dobré vedieť:

Avatarová komponenta automaticky spája všetky nové avatary do všetkých nových komponentov
SETTER('avatar', 'refresh') vyvíja osviežovanie

Použite ho so <ui-component name="avatar">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Denis Granec. Zdroj: úložisko komponentov Componentator, licencia 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>