j-Avatar

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Υποστηρίζει θέματα
Είναι singleton
Εμπνευσμένο από το react-user-avatar

ΘΕΜΑΤΑ:

Το στοιχείο Avatar πρέπει να εγγραφεί το δικό σας θέμα. περιέχει το θέμα default.

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

Οι επιλογές μπορούν να περιλαμβάνουν:

size {Αριθμός} Εναλλακτικά, ένα μέγεθος σε pixels (προεπιλεγμένο: 100)
lighten {Αριθμός} Εναλλακτικά, το χρώμα της γραμματοσειράς θα φωτίζεται από τον φωτεινό παράγοντα του χρώματος υπόβαθρου (προεπιλογή: 80 | Από -255 έως 255)
radius {Αριθμός} Εναλλακτικά, πόσο στρογγυλεμένες γωνίες θα είναι (επιλογή: 50)
background {Hex} Εναλλακτικό, ρυθμισμένο χρώμα υπόβαθρου (επιλογή: επιλεγμένα από τα χρώματα Array)
color {Hex} Εναλλακτικό, ρυθμισμένο χρώμα γραμματοσειράς (επιλογή: δημιουργείται από το χρώμα του φόντου με φωτισμό)
font {String} Εναλλακτική, επιλεγμένη οικογένεια γραμματοσειρών (προεπιλογή: Arial)
weight {String} Εναλλακτική, γραμματικό βάρος (προεπιλεγμένο: bold)
class {String} Εναλλακτικά, αυτή η ιδιοκτησία αρώματα toggleClass για αυτή την κατηγορία

Χρήση:

Κάθε στοιχείο του avatar πρέπει να περιέχει την τάξη avatar όπως αυτή: <div class="avatar">.

data-a="THEME_NAME" Εναλλακτικά, μπορεί να περιέχει ένα όνομα θέματος (προεπιλεγμένο: default)
data-a-url="URL_TO_PICTURE" Εναλλακτική, μπορεί να περιέχει μια URL για τη φωτογραφία του χρήστη
data-a-class="class_for_toggle_effect" Εναλλακτική, μπορεί να περιέχει μια κατηγορία για το αποτέλεσμα toggleClass

Το στοιχείο πρέπει να περιέχει ένα όνομα χρήστη, για παράδειγμα:

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

Καλό να ξέρεις:

Το στοιχείο avatar συνδέει αυτόματα όλα τα νέα avatars σε όλα τα καινούργια στοιχεία
Το SETTER('avatar', 'refresh') εκτελεί αναζωογόνηση

Χρησιμοποιήστε το με <ui-component name="avatar">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Denis Granec. Πηγή: The Componentator Ετικέτες Αξιολόγηση, 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>