j-Avatar

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Поддържате теми
Това е сингъл
Вдъхновение от react-user-avatar

Теми:

Аватар компонент трябва да регистрирате собствената си тема. default Темата е.

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

Опциите могат да съдържат:

size {No} Опционално, размер в пиксели (предварително: 100)
lighten {No} Опционално, цветът на шрифта ще бъде осветлен от светлината на фоновия цвят (предварително: 80 | от -255 до 255)
radius {No} Опционално, колко кръгли ъгъл на границата ще бъде (предварително: 50)
background {Hex} Опционален, зададен цвят на фона (предварително: избрани от цветове Array)
color {Hex} Опционален, зададен цвят на шрифта (дефолт: генериран от фонов цвят чрез светлина)
font {String} Опционално, зададено семейство на шрифтове (дефолт: Arial)
weight {String} Опционално, шрифт тегло (дефолт: bold)
class {String} Опционално, тази собственост парфюми toggleClass за този клас

Използване:

Всеки елемент на аватара трябва да съдържа 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>

Добре е да се знае:

Аватарният компонент автоматично свързва всички нови аватари във всички нови компоненти
SETTER('avatar', 'refresh') се освежава

Използвайте го с <ui-component name="avatar">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Автор: Денис Гран. източник: 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>