j-Avatar

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Stöd för ämnen
Det är singel
Inspiration från react-user-avatar

Temat:

Avatarkomponenten behöver registrera ditt eget tema. Det innehåller default-tema.

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

Alternativ kan innehålla:

size {Numret} Optionellt, en storlek i pixlar (default: 100)
lighten {Numret} Alternativt kommer teckensnittets färg att bli ljusare av bakgrundsfärgfaktorn (default: 80 | från -255 till 255)
radius {Numret} Optionellt, hur runda gränssnittet kommer att vara (default: 50)
background {Hex} Optionell, inställd bakgrundsfärg (default: Välj från färgerna Array)
color {Hex} Optionell, ställd fontfärg (default: genererad från bakgrundsfärg av ljus)
font {String} Optionell, ställd fontfamilj (default: Arial)
weight {String} Optionell, fontvikt (default: bold)
class {String} Optionellt, denna egenskap parfymer toggleClass för denna klass

Användning:

Varje avatarelement måste innehålla avatar-klassen som denna: <div class="avatar">.

data-a="THEME_NAME" Alternativ, kan innehålla ett tema namn (default: default)
data-a-url="URL_TO_PICTURE" Alternativ, kan innehålla en URL för användarfoton
data-a-class="class_for_toggle_effect" Alternativ, kan innehålla en klass för toggleClass effekt

Elementet måste innehålla ett användarnamn, till exempel:

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

Bra att veta:

Avatarkomponenten binder alla nya avatarer i alla nya komponenter automatiskt
SETTER('avatar', 'refresh') gör uppfriskande

Använd den med <ui-component name="avatar">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Denis Granec. källor: den Componentator Komponenterna i lager, MIT licens.

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>