Função
O componente é muito similar ao entrada de texto, porém possui o subcomponente Botão e é utilizado quando se quer obter dados de entrada e executar uma ação em seguida. Por padrão o componente é iniciado com configurações básicas, mas são facilmente alteradas pelo menu de propriedades do componente.
Figura 1 - Exemplo de imagem do componente executando no browser
Um exemplo de uso desse componente seria em um cenário onde se deseja, ao clicar no botão, realizar alguma ação com os valores inseridos no campo de texto.
Principais propriedades
Nome | Propriedade | Função |
|---|---|---|
Título | content | Define o rótulo. |
Tipo | type | Propriedade usada para definir o tipo de entrada, exemplo: data, moeda, e-mail e outros. (padrão: Texto). |
| Ícone | class | Abre a janela de seleção de ícones. |
Máscara | 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 Angular 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. |
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 Angular 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. |
| Classe CSS | ckass | Adiciona classes CSS já 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 botão.
| Nome em português | Nome em inglês | Descrição |
|---|---|---|
Título | Title | Estiliza o título do componente. |
Entrada de texto | Input | Estiliza entrada de texto do componente. |
Sugestão | Placeholder | Estiliza a sugestão do componente. |
Botão | Button | Estiliza o botão do componente. |
Subcomponentes
O componente Entrada de texto com botão (web) é formado por três subcomponentes agrupados: label, input e button. Ao clicar no ícone de cadeado, na barra de opções (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).
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
Input with button
Nesta página
Compatibilidade
Formulário web
Equivalente mobile
Entrada de Texto com Botão (mobile)
Botão do Componente
Imagem no Editor Visual
