j-Avatar

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

apoya temas
es singleton
inspiración de react-user-avatar

Temas:

El componente Avatar necesita registrar su propio tema. Contiene el tema default.

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

Las opciones pueden contener:

size {Número} Opcional, un tamaño en píxeles (predeterminado: 100)
lighten {Número} Opcional, el color de la fuente se aclarará según el factor de aclaración del color de fondo (predeterminado: 80 | de -255 a 255)
radius {Número} Opcional, qué tan redondeadas serán las esquinas del borde (predeterminado: 50)
background {Hex} Opcional, establece el color de fondo (predeterminado: seleccionado entre los colores Array)
color {Hex} Opcional, establece el color de fuente (predeterminado: generado a partir del color de fondo al aclarar)
font {String} Opcional, establece la familia de fuentes (predeterminado: Arial)
weight {Cadena} Opcional, peso de fuente (predeterminado: bold)
class {String} Opcional, esta propiedad realiza toggleClass para esta clase

Uso:

Cada elemento del avatar debe contener una clase avatar como esta: <div class="avatar">. Aquí hay atributos personalizados:

data-a="THEME_NAME" Opcional, puede contener un nombre de tema (predeterminado: default)
data-a-url="URL_TO_PICTURE" Opcional, puede contener una URL para la foto del usuario
data-a-class="class_for_toggle_effect" Opcional, puede contener una clase para el efecto toggleClass

El elemento debe contener un nombre de usuario, por ejemplo:

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

Es bueno saberlo:

El componente de avatar vincula automáticamente todos los avatares nuevos en todos los componentes nuevos.
SETTER('avatar', 'refresh') realiza la actualización

Úselo con <ui-component name="avatar">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Denis Granec. Fuente: repositorio de componentes 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>