j-Avatar

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

susține subiectele
Este un singleton
Inspirație de la react-user-avatar

Subiectele:

Componentul Avatar trebuie să vă înregistrați propria temă. conține tema default.

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

Opțiunile pot conține:

size {Număr} Opțional, o dimensiune în pixeli (default: 100)
lighten {Număr} Opțional, culoarea fontului va fi iluminată de factorul de culoare de fundal (default: 80 | de la -255 la 255)
radius {Număr} Opțional, cum vor fi colțurile de frontieră rotunjite (default: 50)
background {Hex} Opțional, set de culoare de fundal (default: selectat din culori Array)
color {Hex} Opțional, set de culoare a fontului (default: generate din culoarea de fundal prin lumină)
font {String} Opțional, set familia de fonturi (default: Arial)
weight {String} Opțional, greutatea fontului (default: bold)
class {String} Opțional, această proprietate parfumuri toggleClass pentru această clasă

Utilizare:

Fiecare element al avatarului trebuie să conțină clasa avatar ca aceasta: <div class="avatar">.

data-a="THEME_NAME" Opțional, poate conține un nume de temă (default: default)
data-a-url="URL_TO_PICTURE" Opțional, poate conține un URL pentru fotografie utilizatorului
data-a-class="class_for_toggle_effect" Opțional, poate conține o clasă pentru efectul toggleClass

Elementul trebuie să conțină un nume de utilizator, de exemplu:

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

bine să știi:

Componentul avatar conectează automat toate noile avatare în toate componentele
SETTER('avatar', 'refresh') se refrescă

Utilizați-l cu <ui-component name="avatar">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Cuvânt cheie: Denis Granec, Sursă Componentator Componente de stocare, MIT licență.

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>