j-Avatar

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Apoio aos temas
É um singelo
Inspirado pelo react-user-avatar

Temas:

O componente do Avatar precisa registrar seu próprio tema. contém um tema de default.

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

As opções podem conter:

size {Número} Opcional, um tamanho em pixels (default: 100)
lighten {Número} Opcional, a cor da letra será iluminada pelo fator de cor de fundo (default: 80 | de -255 a 255)
radius {Número} Opcional, como os cantos de fronteira redondas serão (default: 50)
background {Hex} Opcional, cor de fundo definida (default: selecionado a partir de cores Array)
color {Hex} Opcional, cor de letra definida (default: gerado a partir da cor de fundo por iluminação)
font {String} Opcional, família de letra definida (default: Arial)
weight {String} Opcional, peso de letra (default: bold)
class {String} Opcional, esta propriedade perfumes toggleClass para esta classe

Uso:

Cada elemento do avatar deve conter a classe avatar como este: <div class="avatar">.

data-a="THEME_NAME" Opcional, pode conter um nome de tema (default: default)
data-a-url="URL_TO_PICTURE" Opcional, pode conter um URL para a foto do usuário
data-a-class="class_for_toggle_effect" Opcional, pode conter uma classe para efeito toggleClass

O elemento deve conter um nome de usuário, por exemplo:

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

Bom para saber:

Componente de avatar liga automaticamente todos os novos avatares em todos os componentes
SETTER('avatar', 'refresh') faz refrescamento

Use-o com <ui-component name="avatar">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Denis Granec. fonte: o Componentator Reserva de componentes, licença 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>