Função
O componente Entrada de texto flutuante é utilizado quando se quer obter dados de entrada. Esse componente se diferencia dos demais por exibir o título somente quando o usuário começa a digitar o conteúdo no campo.
Animação 1 - Exemplo do componente e seus 2 estados: antes e depois de inserir o texto
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
|---|---|---|
Título | content | Texto que será exibido no título do campo quando o usuário inserir o texto. |
Valor | ng-model | Propriedade 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 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. |
Sugestão | placeholder | Exibe um exemplo de resposta para o usuário quando o campo está vazio. Para esse componente, normalmente essa propriedade contém o mesmo texto da propriedade Conteúdo. |
Máscara | mask | Propriedade de máscara aplicado ao campo de entrada de texto. Ver mais em Formatação de máscaras na camada cliente. |
Sugestão de Máscara | mask-placeholder | Exibe um exemplo de resposta no momento que o usuário insere os dados, os caracteres são substituídos à medida que o usuário digita. |
Tipo de Teclado | keyboard | Específica qual será o tipo de teclado que será exibido no Smartphone do 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 Angular 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. |
| Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Eventos
Na tabela abaixo estão descritos os principais eventos do componente.
| 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. |
| Ao Clique Duplo Rápido | on-double-tap | Executa uma ação sempre que um elemento é clicado duas vezes |
| Ao Focar | ng-focus | Executa uma ação assim que o componente é focado. |
| Ao Sair do Foco | ng-bur | Executa uma ação assim que o componente sai do foco. |
| Ao Pressionar | ng-hold | Executa uma ação sempre que um elemento é pressionado sem soltar por alguns milissegundos. |
| Ao Deslizar | ng-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 um elemento é arrastado. |
Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente.
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 de escrita do componente. |
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:
|
Subcomponentes
O componente Entrada de texto flutuante é formado por dois subcomponentes agrupados: span e input. Ao clicar no botão com ícone de cadeado (Figura 1) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Para inserir uma das propriedades mostradas na tabela acima, acesse a propriedade Nova propriedade (destaque 1 da Figura 2).
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
Float Input
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Imagem no Editor Visual
