j-Avatar

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Sostenere i temi
è singletone
L'ispirazione da react-user-avatar

Il tema:

Il componente Avatar deve registrare il proprio tema. contiene il tema default.

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

Le opzioni possono contenere:

size {Numero} Opzionale, una dimensione in pixel (default: 100)
lighten {Numero} Opzionale, il colore della lettera sarà illuminato dal fattore di colore di sfondo (default: 80 | da -255 a 255)
radius {Numero} Opzionale, come saranno gli angoli di confine rotondi (default: 50)
background {Hex} Opzionale, colore di sfondo (default: selezionato da colori Array)
color {Hex} Opzionale, colore di font (default: generato dal colore di sfondo da illuminare)
font {String} Opzionale, set famiglia di font (default: Arial)
weight {String} Opzionale, peso di font (default: bold)
class {String} Opzionale, questa proprietà profumi toggleClass per questa classe

Utilizzo:

Ogni elemento dell'avatar deve contenere la classe avatar come questo: <div class="avatar">.

data-a="THEME_NAME" Opzionale, può contenere un nome di tema (default: default)
data-a-url="URL_TO_PICTURE" Opzionale, può contenere un URL per la foto utente
data-a-class="class_for_toggle_effect" Opzionale, può contenere una classe per l'effetto toggleClass

L'elemento deve contenere un nome utente, ad esempio:

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

Buono sapere:

Il componente avatar collega automaticamente tutti i nuovi avatar in tutti i componenti
SETTER('avatar', 'refresh') si rilassano

Utilizzare con <ui-component name="avatar">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Denis Granec. fonte: il Componentator Ristorante dei componenti, licenza 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>