j-Avatar

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Wspierają tematy
Jest to singleton
Inspiracja z react-user-avatar

Tematy:

Komponent Avatara musi zarejestrować swoją własną tematykę. zawiera temat default.

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

Opcje mogą zawierać:

size {Liczba} Opcjonalnie, rozmiar w pikselach (default: 100)
lighten {Liczba} Opcjonalnie, kolor czcionki zostanie oświetlony przez jasny czynnik koloru tła (default: 80 | od -255 do 255
radius {Liczba} Opcjonalne, jak okrągłe kąty graniczne będą (default: 50)
background {Hex} Opcjonalny, ustawiony kolor tła (default: wybrane z kolorów Array)
color {Hex} Opcjonalny, ustawiony kolor czcionki (default: generowany z koloru tła przez jasne)
font {String} Opcjonalny, ustawiony rodzina czcionek (default: Arial)
weight {String} Opcjonalne, waga czcionki (default: bold)
class {String} Opcjonalne, to właściwość perfumy toggleClass dla tej klasy

Używanie:

Każdy element avataru musi zawierać klasę avatar, taką jak: <div class="avatar">.

data-a="THEME_NAME" Opcjonalny, może zawierać nazwę tematu (default: default)
data-a-url="URL_TO_PICTURE" Opcjonalny, może zawierać adres URL dla zdjęcia użytkownika
data-a-class="class_for_toggle_effect" Opcjonalny, może zawierać klasę dla efektu toggleClass

Element musi zawierać nazwę użytkownika, na przykład:

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

Dobrze wiedzieć:

Komponent avatara łączy wszystkie nowe avatary automatycznie
SETTER('avatar', 'refresh') odświeża

Użyj go z <ui-component name="avatar">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Denis Granec Źródło: Componentator Zestaw składników, licencja 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>