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
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
|---|---|---|
Ícone | class | Abre a janela para seleção do ícone. |
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. |
Máscara | mask | Propriedade de máscara aplicado 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. |
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 usada para mostrar ou oculta o componente. |
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. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Subcomponentes
O componente Entrada de texto com ícone é formado por dois subcomponentes agrupados: ícone e input. Ao clicar no botão bolha com ícone de cadeado (Figura 2) o componente é desbloqueado, permitindo a seleção de seus subcomponentes.
Dica
Consulte o tópico "Acesso aos subcomponentes" da documentação Componentes visuais para mais informações.
Figura 2 - Desagrupar componente para acessar subcomponentes
Nome em inglês
Icon Input
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Entrada de texto com ícone (web)
Botão do Componente
Imagem no Editor Visual