Função
O componente Entrada de texto com botão, muito similar ao componente Entrada de texto, é 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 e são facilmente alteradas 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.
Acesse a documentação do botão para informações de suas propriedades.
Nome | Propriedade | Função |
|---|---|---|
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, 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. |
| Tema do botão | xattr-theme | Permite escolher um tema Bootstrap (cor) para o botão |
| Tamanho mínimo | ng-minlength | Atributo 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 | Atributo 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. |
| Estilo | style | Altera o estilo do componente da forma inline. |
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. |
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 |
|---|---|---|
| Plano de fundo | Background | Estiliza o plano de fundo do componente. |
| Entrada de texto | Input | Estiliza a entrada de texto do componente. |
| Sugestão | Placeholder | Estiliza a sugestão da entrada de texto. |
| Botão | Button | Estiliza o botão 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.
Nome | Propriedade | Função |
|---|---|---|
Tamanho máximo | maxlength | Define o número máximo de caracteres aceitos 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 | Esta propriedade precisa ser inserida manualmente. 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 um fonte de dados:
|
Subcomponentes
O componente Entrada de texto com botão (mobile) é formado por dois subcomponentes agrupados: input e botão. 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.
Tema do botão
Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.
As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:
- Alteração do tema do projeto (menor prioridade);
- Adição da Skin do projeto através do campo "Skin do Tema Web" na janela de Configurações do Projeto.
- Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade)
Nome em inglês
Input Button
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Entrada de texto com botão (web)
Botão do Componente
Imagem no Editor Visual
