Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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. Veja em Ícone (web) as propriedades do ícone presente nesse componente.
Image Removed
Image Added
Figura 1 - Exemplo do componente rodando no navegador
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 | |||||
---|---|---|---|---|---|---|---|
ConteúdoTítulo | label | Atribuir um título ao componente que fica logo acima do campo de entrada de texto. Esse conteúdo pode ser definido através de uma expressão, Campo da tela, Bloco de programação ou informado um simples texto estático. | content | Define o rótulo | Valor | ng-model | Propriedade AngularJS 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. | |||||
Sugestão | placeholder | Especifica uma breve dica que descreve o valor esperado no campo. | |||||
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. | |||||||
MascaraMáscara | mask | Propriedade de máscara aplicado aplicada ao campo de entrada de texto. Ver mais em Máscaras HTML Máscara HTML. | |||||
Desabilitado | ng-disabled | Directiva usada para desabilitar um componente quando a expressão vinculada for verdadeira. | |||||
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 utilizadoplaceholder | Exibe um exemplo de resposta para o usuário quando o campo está vazio. | |
Valor | ng-model | Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. | |||||
Requerido | ng-required | Define que o campo é de preenchimento obrigatório. | |||||
Ícone | class | Abre a janela de seleção de ícones. | |||||
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão, um id ID é gerado automaticamente e atribuído ao componente. | |||||
Estilo | style | Altera o estilo geral do componente da forma inline. | |||||
Exibir | ng-show | Propriedade AngularJS 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 de 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. |
Somente 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 ícone.
Nome | Propriedade | Função |
---|---|---|
Ao Iniciar | ng-init | Executa uma ação assim que o componente é renderizado na tela. |
Ao Alterar | ng-change | Executa uma ação assim que algo no componente é alterado. |
Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
Ao Duplo Clicar | ng-dblclick | Executa uma ação quando o usuário clica duas vezes seguidas com o botão do mouse em um componente. |
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 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 Entrar com Mouse | ng-mouseenter | Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do elemento. |
Ao Sair com Mouse | ng-mouseleave | Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do elemento. |
Evento de Copiar | ng-copy | Executa uma ação assim que o elemento é copiado do componente. |
Ao Colar | ng-paste | Executa uma ação assim que o elemento é colado no componente. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Entrada de texto com ícone.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Título | Title | Estiliza o título do componente. |
Entrada de texto | Input | Estiliza a entrada de texto do componente. |
Sugestão | Placeholder | Estiliza a sugestão do componente. |
Ícone | Icon | Estiliza o ícone do componente. |
Âncora | ||||
---|---|---|---|---|
|
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 subcomponente, 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 mais informações. |
Image Added
Figura 2 - Desagrupar componente para acessar seus 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 Data (2) e Alcance (3). Para deixar os dois componentes lado a lado, utilizamos o componente Colunas.
Image Added
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 data e o segundo um regulador de alcance (Figura 3.1).
Image Added
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 web
Equivalente web
Entrada de texto com ícone (mobile)
Botão do Componente
Image Removed
Image Added
Imagem no Editor Visual
Image Removed
Image Added