# j-Avatar

> Avatar komponenta musí zaregistrovat vlastní téma. obsahuje výchozí téma.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: cs
Content-SHA256: 8be0b9a6214057dfd39d7a00f42b106e50858ed656fa02c6b5d399f750f4db57
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Podporuje témata
- Je to singleton
- Inspirace z `react-user-avatar`

__Témata__:

Komponenta Avataru musí zaregistrovat vlastní téma. obsahuje téma `default`.

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

Možnosti mohou obsahovat:

- `size` {Číslo} Volitelné, velikost v pixelů (předvolené: `100`)
- `lighten` {Číslo} Volitelně, barva písma bude osvětleno jasným faktorem barvy pozadí (předběžné: `80` | od -255 do 255
- `radius` {Číslo} Volitelné, jak okrúhlé hranice budou (předvolené: `50`)
- `background` {Hex} Volitelná, nastavená barva pozadí (podle předvolby: vybraná z barev `Array`)
- `color` {Hex} Volitelná, nastavená barva písma (podle předvolby: vytvořená z pozadí barvy světlem)
- `font` {String} Volitelné, nastavené písemné rodiny (předvolené: `Arial`)
- `weight` {String} Volitelné, písemná hmotnost (předvolené: `bold`)
- `class` {String} Volitelné, tato vlastnost parfémů `toggleClass` pro tuto třídu

__Použití__:

Každý prvek avataru musí obsahovat třídu `avatar`, jako je tento: `<div class="avatar">`.

- `data-a="THEME_NAME"` Volitelné, může obsahovat název tématu (podle předvolby: `default`)
- `data-a-url="URL_TO_PICTURE"` Volitelné, může obsahovat URL pro uživatelskou fotografii
- `data-a-class="class_for_toggle_effect"` Volitelné, může obsahovat třídu pro efekt `toggleClass`

Jednotka musí obsahovat uživatelské jméno, například:

- `<div class="avatar">Peter Širka</div>` nebo
- `<a href="#" class="avatar">Peter Širka</a>`

__Dobré vědět__:

- Avatar se automaticky připojuje ke všem novým avatám
- `SETTER('avatar', 'refresh')` se vyvíjí

Použijte ji s `<ui-component name="avatar">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle výchozího nastavení). autor: Denis Granec. zdroj: The Componentator Výrobce je autorizován, MIT licence.

```html 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>
```