# j-InputTags

> j-InputTags: se o licon ou ricon começa com ! então o componente faz um valor cru em vez do ícone

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

__Configuração__:

- `required {Boolean}` opcional, permite o "requisito" (default: `false`)
- `icon {String}` opcional, ícone para o rótulo, por exemplo, `home`, `cog`, etc.
- `licon {String}` opcional, ícone esquerda, por exemplo, `home`, `cog`, etc.
- `liconclick {String}` opcional, um caminho para o método `function(component, input)`
- `ricon {String}` opcional, ícone direita, por exemplo, `home`, `cog`, etc.
- `riconclick {String}` opcional, um caminho para o método `function(component, input)`
- `label {String}` opcional, um rótulo (default é conteúdo HTML)
- `after {String}` opcional, significa um carrinho após a etiqueta (default: `:`)
- `placeholder {String}` opcional, adiciona um texto `placeholder` à entrada
- `validate {String}` opcional, uma condição para validação de valor, pode conter um link para `function(value)` ou `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` opcional, desabilita este componente
- `error {String}` opcional, adiciona um texto `string` abaixo do componente
- `spaces {Boolean}` opcional, permite espaços caso contrário ele os remove (default: `true`)
- `innerlabel {Boolean}` opcional, permite a etiqueta interna (default: `true`)
- `dirsource {String}` opcional, o caminho para uma fonte de dados ou __NEW__ pode conter um link para o método `function(search, next(items_arr))`
- `dircustom {String/Boolean}` opcional, pode conter um caminho para `function(val, next(new_val))` ou pode ser `Boolean`.Esta opção pode permitir adicionar um valor personalizado (valor não definido na fonte de dados)
- `dirrender {String}` opcional, um caminho para `function(item, text)` (deve retornar HTML para `j-Directory`), esta função pode afetar a lista de itens em `j-Directory`
- `dirminwidth {Number}` opcional, uma largura mínima para `j-Directory`, padrão: `200`
- `dirmaxwidth {Number}` opcional, uma largura máxima para `j-Directory`
- `dirplaceholder {String}` opcional, um local para `j-Directory`
- `dirempty {String}` opcional, adiciona um campo vazio para `j-Directory`
- `dirkey {String}` opcional, um nome chave para a leitura de `text` em `dirsource` (default: `name`)
- `dirvalue {String}` opcional, um nome chave para a leitura de `value` em `dirsource` (default: `id`)
- `autosource {String}` um caminho para a função `search` em `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` um caminho de propriedade para o valor em `autosource`
- `transform {Number}` opcional, transforma o texto `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (default: `0`)
- `enteronly {Boolean}` opcional, adiciona um novo valor depois que a chave `enter` é pressionada (default: `true`)

__Interessante em:__

- `dirsource:path.to.datasource` necessita __`directory`__ componente
- Se `licon` ou `ricon` começa com `!`, então o componente faz um valor razoável em vez de `icon`.
- `dirsource` com caminhos para métodos pode carregar dados sem sincronização

Use-o com `<ui-component name="inputtags">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>
```