j-Avatar

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Támogatja a témákat
Ez a singleton
A react-user-avatar-ből származó

témák:

Az Avatar komponensnek regisztrálnia kell a saját témáját. tartalmazza a default témát.

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

Az opciók tartalmazhatnak:

size {Number} Opcionális, pixelek méretű (default: 100)
lighten {Number} Opcionális, a betűtípus színe a háttérszín fényes tényezője által megvilágosodik (default: 80 | 255 és 255 között
radius {Number} Opcionális, hogy a kerek sarok lesz (default: 50)
background {Hex} Opcionális, háttérszín (default: kiválasztott színekből Array)
color {Hex} Opcionális, beállított betűtípus színe (meghatározott: a háttérszíntől származó fény)
font {String} Opcionális, beállított betűtípus (default: Arial)
weight {String} Opcionális, betűtípus (default: bold)
class {String} Opcionális, ez a tulajdonság parfümök toggleClass erre az osztályra

Használat:

Az avatar minden eleme tartalmazza a avatar osztályot, mint ez: <div class="avatar">.

data-a="THEME_NAME" Opcionális, tartalmazhat egy témakör nevét (default: default)
data-a-url="URL_TO_PICTURE" Opcionális, tartalmazhat egy URL-t a felhasználói fotó
data-a-class="class_for_toggle_effect" Opcionális, tartalmazhat egy osztály a toggleClass hatás

Az elemnek felhasználói nevet kell tartalmaznia, például:

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

Jó tudni:

Az avatar komponens automatikusan összeköti az összes új avatárt
A SETTER('avatar', 'refresh') frissítést nyújt

Használja a <ui-component name="avatar">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator CDN default). szerző: Denis Granec. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>