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.
Figura 1 - Exemplo do componente rodando no navegador
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|---|---|
Conteúdo | 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. |
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. |
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.
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 leitura | ng-readonly | Bloqueia edições no campo e exibe seu conteúdo apenas para leitura. |
Âncora | ||||
---|---|---|---|---|
|
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.
Informações | ||
---|---|---|
| ||
Consulte o tópico "Acesso aos subcomponentes" da documentação Componentes visuais para mais informações. |
Figura 2 - Desagrupar componente para acessar seus subcomponentes
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
Imagem no Editor Visual