# j-Avatar

> Avatarkomponenten behöver registrera ditt eget tema. Det innehåller standardtema.

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

- 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.

```javascript
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.

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