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
Nome | Propriedade | Função |
---|---|---|
Título | content | Define o rótulo. |
Tipo | type | Propriedade usada para definir o tipo de entrada dos dados, exemplo: como data, moeda, e-mail e , entre outros. (valor padrão: text)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. |
Mascara | mask | Propriedade de máscara aplicada ao campo de entrada de texto. Ver mais em Máscara HTML. |
Desabilitado | ng-disabled | Directiva usada para desabilitar um componente quando a expressão vinculada for verdadeira. |
Sugestão | placeholder | 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 é 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. |
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 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 clicar no botão bolha com ícone de cadeado (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 1 da figura 2).
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