# j-InputTags

> j-InputTags: dacă liconul sau riconul începe cu ! atunci componenta face o valoare crudă în locul iconului

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

__Configurarea__:

- `required {Boolean}` opțional, permite „necesită” (default: `false`)
- `icon {String}` opțional, icon pentru etichetă de exemplu `home`, `cog`, etc.
- `licon {String}` opțional, iconul stâng de exemplu `home`, `cog`, etc.
- `liconclick {String}` opțional, o cale către metoda `function(component, input)`
- `ricon {String}` opțional, icon drept, de exemplu `home`, `cog`, etc.
- `riconclick {String}` opțional, o cale către metoda `function(component, input)`
- `label {String}` opțional, o etichetă (default este conținutul HTML)
- `after {String}` este opțional, înseamnă un car după etichetă (default: `:`)
- `placeholder {String}` este opțional, adăugând un text `placeholder` la intrarea
- `validate {String}` opțional, o condiție de validare a valorii, poate conține un link la `function(value)` sau `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` opțional, dezactivă acest component
- `error {String}` opțional, adaugă un text `string` sub componenta
- `spaces {Boolean}` opțional, permite spații altfel le îndepărtează (default: `true`)
- `innerlabel {Boolean}` opțional, permite eticheta interioară (default: `true`)
- `dirsource {String}` opțional, calea către o sursă de date sau __NEW__ poate conține un link la metoda `function(search, next(items_arr))`
- `dircustom {String/Boolean}` este opțional, poate conține o cale la `function(val, next(new_val))` sau poate fi `Boolean`.Această opțiune poate permite adăugarea unei valori personalizate (valorile nu sunt definite în sursa de date)
- `dirrender {String}` opțional, o cale la `function(item, text)` (trebuie să se întoarcă HTML pentru `j-Directory`), această funcție poate afecta lista de elemente din `j-Directory`
- `dirminwidth {Number}` opțional, o lățime minimă pentru `j-Directory`, standard: `200`
- `dirmaxwidth {Number}` opțional, o lățime maximă pentru `j-Directory`
- `dirplaceholder {String}` opțional, un locator pentru `j-Directory`
- `dirempty {String}` opțional, adaugă un câmp gol pentru `j-Directory`
- `dirkey {String}` opțional, un nume cheie pentru citirea `text` în `dirsource` (default: `name`)
- `dirvalue {String}` opțional, un nume cheie pentru citirea `value` în `dirsource` (default: `id`)
- `autosource {String}` este o funcție de `search` în `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` este o cale de proprietate pentru valoarea în `autosource`
- `transform {Number}` opțional, transformă textul `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (default: `0`)
- `enteronly {Boolean}` este opțional, adaugă o nouă valoare după ce se prestează cheia `enter` (default: `true`)

__Interesantă :__

- `dirsource:path.to.datasource` necesită componentul __`directory`__
- Dacă `licon` sau `ricon` începe cu `!`, atunci componenta face o valoare crudă în loc de `icon`.
- `dirsource` cu căi la metode pot încărca datele în mod asimetric

Utilizați-l cu `<ui-component name="inputtags">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

```html example.html
<ui-component name="directory" config="placeholder:Search..."></ui-component>

<div style="width:400px">
	<ui-component name="inputtags" path="form.frameworks" config="required:1;placeholder:Type a framework name;dirsource:frameworks">Framework</ui-component>
	<br />
	<ui-component name="inputtags" path="form.countries" config="innerlabel:true">Country</ui-component>
</div>

<script>
	var frameworks = [{ id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var form = { framework: [1], countries: ['Slovakia', 'Poland', 'Hungary', 'Germany'] };
</script>
```
