- Criado por Deborah Melo de Carvalho, última alteração por Laila Maria Vieira Souza em 05/05/2023
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 18 Próxima »
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:
|
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 Mobile" na janela de Configurações do Projeto.
- Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).
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.
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
- Sem rótulos