Função
O componente Entrada de texto com ícone, muito similar ao componente Entrada de texto, é utilizado quando se quer obter dados de entrada. Sua diferença entre os outros componentes é a presença do componente ícone ao lado do campo. Por padrão o componente é iniciado com configurações básicas que são facilmente acessadas pelo menu de propriedades do componente.
Figura 1 - Exemplo do componente rodando no simulador
Principais propriedades
Aba de propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função | |||
|---|---|---|---|---|---|
Ícone | class | Abre a janela para seleção do ícone. | |||
Valor | ng-model | Propriedade AngularJS Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. | |||
Tipo | type | Propriedade usada para definir o tipo de entrada , podendo ser texto, número, inteiro, dentre outras opções.dos dados, como data, moeda, e-mail, entre outros. O tipo padrão é 'Texto'. Algumas dessas opções influenciam a forma como o componente será exibido. O tratamento de máscaras não deve ser feito nesse campo. Embora seja possível escrever no campo, o usuário deve se limitar a selecionar uma das opções disponíveis na lista específica do campo. Confira mais detalhes no tópico Tipo. | |||
| Cor do ícone | xattr-theme | Alterna a cor do ícone. | |||
Sugestão | placeholder | Atributo do tipo texto, ele especifica uma dica sobre o conteúdo que deve ser inserido no componente | Sugestão | placeholder | Especifica uma breve dica que descreve o valor esperado no campo. |
Máscara | mask | Propriedade de máscara aplicado aplicada ao campo de entrada de texto. Ver mais em Máscaras HTML. | |||
Sugestão de Máscara | mask-placeholder | Especifica uma breve dica que descreve o valor esperado no campo. | |||
Tipo de Teclado | keyboard | Específica qual será o tipo de teclado que será mostrado ao usuário quando esse campo for utilizado. | |||
| Tamanho mínimo | ng-minlength | Diretiva que adiciona uma restrição em um campo de texto e uma validação em um formulário caso o número mínimo de caracteres não seja atingido. | |||
| Máximo de caracteres | ng-maxlength | Diretiva que adiciona uma restrição em um campo de texto e uma validação em um formulário caso ultrapasse o número máximo de caracteres. | |||
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. | |||
Exibir | ng-show | Propriedade AngularJS Angular usada para mostrar ou oculta o componente. | |||
| Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. | |||
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. | |||
| Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. | |||
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Propriedades do subcomponente input
As propriedades abaixo não são nativas do componente. Para adicionar essas ou outras propriedades, será necessário selecionar o subcomponente input, desagrupando o componente principal e inserindo, na propriedade Nova propriedade, uma das propriedades abaixo, como mostra a figura 2.
Nome | Propriedade | Função |
|---|---|---|
Tamanho máximo | maxlength | Define o número máximo de caracteres aceito no campo. Algumas máscaras possuem caracteres que ocupam espaços, dessa forma, ao informar o número máximo de caracteres nesta propriedade, leve em consideração a quantidade de caracteres utilizados pela máscara. |
Tamanho mínimo | minlength | Define o número mínimo de caracteres aceito no campo. A linha do campo ficará em vermelho até que o usuário digite o mínimo de caracteres necessários. Algumas máscaras possuem caracteres que ocupam espaços, dessa forma, ao informar o número mínimo de caracteres nesta propriedade, leve em consideração a quantidade de caracteres utilizados pela máscara. |
Apenas leitura | ng-readonly | Bloqueia edições no campo e exibe seu conteúdo apenas para leitura. Por padrão, possui as opções "Sim" e "Não". Essa propriedade também aceita expressões, permitindo, por exemplo, bloquear um campo vinculado a uma fonte de dados:
|
Aba de Eventos
Na tabela abaixo estão descritos os tipos de eventos disponíveis para o componente Entrada de texto com botão.
Nome | Propriedade | Função |
|---|---|---|
| Apertar Tecla | ng-keydown | Executa uma ação assim que uma tecla é acionada no teclado. |
| Ao Soltar Tecla | ng-keyup | Executa uma ação ao soltar uma tecla do teclado. |
| Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
| on-double-tap | Executa uma ação sempre que o botão do componente é é clicado duas vezes. | |
| Ao Focar | ng-focus | Executa uma ação assim que o componente é focado. |
| Ao Sair do Foco | ng-blur | Executa uma ação assim que o componente sai do foco. |
Ao Pressionar | on-hold | Executa uma ação sempre que o componente é pressionado sem soltar por alguns milissegundos. |
Ao Deslizar | on-swipe | Executa uma ação sempre que é feito uma ação de swipe no elemento. |
Ao Arrastar | on-drag | Executa uma ação sempre que o componente é arrastado. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Estrada de texto com ícone.
| Nome em português | Nome em inglês | Descrição |
|---|---|---|
Entrada de texto | Input | Estiliza a o campo de entrada de texto do componente. |
Ícone | Icon | Estiliza o ícone do componente. |
Âncora corIcone corIcone
Cor do ícone
Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.
As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:
- Alteração do tema do projeto (menor prioridade);
- Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de Configurações do Projeto.
- Seleção da Skin na propriedade "Skin" do componente visual (maior prioridade).
Âncora subcomponentes subcomponentes
Subcomponentes
O componente Entrada de texto com ícone é formado por dois subcomponentes agrupados: ícone e input. Ao Ao clicar no botão bolha com ícone de cadeado (Figura destaque 1 da figura 2) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Para inserir uma das propriedades mostradas na tabela de subcomponentes acima, acesse a propriedade Nova propriedade (destaque 2 da figura 2).
| Informações | ||
|---|---|---|
| ||
Consulte o tópico "Acesso aos subcomponentes" da documentação Componentes visuais para para mais informações. |
Figura 2 - Desagrupar componente para acessar subcomponentes
| Âncora | ||||
|---|---|---|---|---|
|
Tipo
No parâmetro Tipo (destaque 1 da figura 3) é possível determinar o tipo de informação que o componente Entrada de texto com ícone irá receber, como apresentado na figura 3, arrastamos 2 componentes Entrada de texto com ícone e em cada um selecionamos um tipo diferente, são eles Telefone (2) e Data (3).
Figura 3 - Selecionando tipos
| Nota |
|---|
Como dito anteriormente na tabela de propriedades, apesar de ser possível escrever sobre o campo, o usuário deve se limitar a escolher uma das opções disponibilizadas pela propriedade Tipo. |
Após executarmos o projeto e acessarmos a view, verificamos que os 2 componentes Entrada de texto com ícone inseridos anteriormente na figura 3, estão recebendo tipos de informações diferentes, o primeiro recebe uma telefone e o segundo uma data (Figura 3.1).
Figura 3.1 - Exemplos de tipos
Além dos tipos mostrados acima, também possuímos outros tipos, abaixo listaremos a funcionalidade de cada um:
- Texto: recebe uma informação do tipo texto;
- Número: aceita números com casas decimais;
- Inteiro: recebe apenas números inteiros;
- Moeda: recebe números inteiros e o separa com pontos a cada 3 dígitos, ex.: 1.000 (mil);
- Decimal de moeda: recebe números e separa, além de pontos a cada 3 dígitos, também por vírgulas os números decimais, ex.: 1.000,50 (mil e cinquenta centavos);
- Senha: recebe informações do tipo senha, escondendo com "*" o valor digitado;
- Data: recebe informações do tipo Data sem hora;
- Data e hora: recebe informações do tipo Data contendo a hora;
- Data e hora local: recebe informações do tipo Data contendo a hora no fuso horário local;
- Cor: recebe cores do tipo RGB;
- E-mail: recebe informações do tipo e-mail, contendo "
email@email", caso não esteja desta forma, o campo ficará vermelho dando entender ao usuário que o valor digitado não é um e-mail; - Mês: recebe o nome do mês desejado;
- Alcance: muda o formato para uma barra que informará o alcance de 0 a 100;
- Pesquisa: recebe uma informação do tipo texto;
- Telefone: recebe números de telefones já com a máscara (DDD) 00000-0000;
- Hora: recebe informação no formato de horário, ex.: 05:17:13.
- Hora local: recebe informação no formato de horário, ex.: 05:17:13 no fuso horário local;
- Url: recebe informações do tipo Url no formato "
http://exemplo.com/", caso não esteja desta forma, o campo ficará vermelho dando entender ao usuário que o valor digitado não é uma Url; - Semana: recebe o nome do dia na semana.
Nome em inglês
Icon Input
Nesta página
| Índice | ||||
|---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web
Entrada de texto com ícone (web)
Botão do Componente
Imagem no Editor Visual
