# j-InputTags

> j-InputTags: jeśli licon lub ricon zaczyna się z ! to składnik daje wartość surową zamiast ikony

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

__Konfiguracja__:

- `required {Boolean}` opcjonalny, umożliwia "wymagane" (default: `false`)
- `icon {String}` opcjonalny, ikona dla etykiety np. `home`, `cog`, itp.
- Ikony `licon {String}` opcjonalne, ikonę lewej np. `home`, `cog`, itp.
- `liconclick {String}` opcjonalny, droga do metody `function(component, input)`
- Ikony `ricon {String}` opcjonalne, prawica np. `home`, `cog`, itp.
- `riconclick {String}` opcjonalny, droga do metody `function(component, input)`
- `label {String}` opcjonalny, etykieta (default jest treścią HTML)
- `after {String}` opcjonalny, oznacza to ładunek po etykietowaniu (default: `:`)
- `placeholder {String}` opcjonalny, dodaje tekst `placeholder` do wpisu
- `validate {String}` opcjonalny, warunek weryfikacji wartości, może zawierać link do `function(value)` lub `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` opcjonalny, wyłącza ten składnik
- `error {String}` opcjonalny, dodaje tekst `string` pod składnikiem
- `spaces {Boolean}` opcjonalny, umożliwia przestrzenie w przeciwnym razie usuwa je (default: `true`)
- `innerlabel {Boolean}` opcjonalny, umożliwia etykietę wewnętrzną (default: `true`)
- `dirsource {String}` opcjonalny, ścieżka do źródła danych lub __NEW__ może zawierać link do metody `function(search, next(items_arr))`
- `dircustom {String/Boolean}` jest opcjonalny, może zawierać ścieżkę do `function(val, next(new_val))` lub może być `Boolean`. ta opcja może umożliwić dodanie wartości dostosowanej (wartość nie jest zdefiniowana w źródle danych)
- `dirrender {String}` opcjonalny, ścieżka do `function(item, text)` (musisz zwrócić HTML dla `j-Directory`), ta funkcja może wpływać na listę elementów w `j-Directory`
- `dirminwidth {Number}` opcjonalny, minimalna szerokość dla `j-Directory`, domyślnie: `200`
- `dirmaxwidth {Number}` opcjonalny, maksymalna szerokość dla `j-Directory`
- `dirplaceholder {String}` opcjonalny, miejsce dla `j-Directory`
- `dirempty {String}` opcjonalny, dodaje puste pole do `j-Directory`
- `dirkey {String}` opcjonalny, nazwa kluczowa do czytania `text` w `dirsource` (default: `name`)
- `dirvalue {String}` opcjonalny, nazwa kluczowa do czytania `value` w `dirsource` (default: `id`)
- `autosource {String}` Droga do `search` Funkcja w `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` - trasa właściwości dla wartości w `autosource`
- Opcjonalny `transform {Number}`, przekształca tekst `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (default: `0`)
- Opcjonalnie `enteronly {Boolean}` dodaje nową wartość po naciśnięciu klucza `enter` (default: `true`)

__Interesujące jest:__

- `dirsource:path.to.datasource` potrzebny __`directory`__ składnik
- Jeśli `licon` lub `ricon` zaczyna się od `!`, to składnik daje wartość surową zamiast `icon`.
- `dirsource` z ścieżkami do metod może ładować dane w sposób niesynchronny

Użyj go z `<ui-component name="inputtags">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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