ILLA home page
  1. Input

Componente de Entrada de Texto é um elemento de interface de usuário que permite aos usuários inserir e editar texto em um campo de entrada ou formulário.

propriedades

propriedadesDescrição:
Valor padrãoO valor inicial do componente. Você pode alterar dinamicamente o valor inicial digitando JavaScript na {{}}.
Espaço reservadoO valor será exibido quando o campo de entrada estiver vazio.
DescriçãoO nome do campo exibido ao usuário
LegendaUma legenda usada para descrever o campo em detalhes
Etiqueta ocultaDefinir se deve exibir o rótulo
PosiçãoDefinir a posição do rótulo relativo ao componente
AlinhamentoDefinir o alinhamento (alinhar com a esquerda ou direita) da etiqueta
WidthQuando a etiqueta estiver no lado esquerdo do componente, defina a largura proporcional do rótulo.
Gerenciador de EventosAcionar consultas, componentes de controle ou chamar outras APIs em resposta a eventos de componentes.
DesabilitadoControla o estado de se o componente está desabilitado. O componente não pode ser modificado ou focado quando está desabilitado.
Somente leituraControla o status de se o componente é somente leitura. Um componente somente leitura pode ser selecionado e focado mas não pode ser modificado.
Exibir botão Limparcontrole se um botão limpar é exibido no campo de entrada
Mostrar contagem de caracterescontrole se a contagem de caracteres da entrada é exibida ou não
Texto do prefixoum pequeno pedaço de texto que aparece à esquerda do campo de entrada, geralmente usado para fornecer contexto adicional ou instruções para o usuário
Sufixo de textoum pequeno texto que aparece à direita do campo de entrada, geralmente usado para fornecer informações adicionais ou feedback ao usuário
DicaOs usuários podem inserir a dica do componente aqui. A dica será exibida quando estiver focada. O formato Markdown é suportado.
Campo obrigatórioVálido somente quando o interruptor está ligado.
Padrãoespecifique um padrão de expressão regular que a entrada do usuário deve corresponder para ser considerada válida
Comprimento Máximodefina o número máximo de caracteres que podem ser inseridos no campo de entrada.
Comprimento Mínimoespecifique o número mínimo de caracteres que o usuário deve digitar no campo de entrada para que a entrada seja considerada válida.
Regra personalizadaCria a sua lógica de validação aqui. As regras devem ser feitas em JavaScript e cobertas pela {{}}.
Ocultar mensagem de validaçãoVocê pode ocultar a mensagem de erro alterando o status oculto quando o valor de entrada está incorreto. Você pode alterar dinamicamente o status oculto por JavaScript.
Chave de Dados do FormulárioEspecificar uma chave de um componente de formulários de embalagem ao construir o atributo de dados.
HiddenControle dinamicamente se o componente está oculto. Você pode alterar o status oculto através de um valor booleano dinâmico.
Cor do TemaPermite aos usuários especificar a cor e a opacidade do fundo do botão

Método

Você pode usar outros componentes para controlar o componente. Apoiamos os seguintes dois métodos:

  • definirValor

Para definir o valor de entrada, por exemplo, {{‘value1’}}

propriedadesDescrição:
ValorInput value
  • ValorDeLimite

Para limpar o valor do componente selecionado

  • focus

Quando o método de foco é chamado, o campo de entrada será destacado e pronto para o usuário começar a digitar sem a necessidade do usuário clicar no campo de entrada

Exemplo de uso:

Componente de entrada suporta ouvir o evento onChange de outros componentes usando o sistema de eventos integrado. Configure seguindo estes passos de exemplo:

  1. Adicionar um gatilho de eventos para o componente que você deseja ouvir. Por exemplo, se você quer ouvir o evento onChange de um componente do Grupo de Rádio, você adicionaria um manipulador de eventos para o componente Radio Group
  2. No manipulador de Editar evento, selecione componente de controle em ação, selecione o componente Input que você deseja atualizar como o alvo do evento.
  3. Escolha a ação SetValue e selecione o valor apropriado para o componente de entrada. Este será o valor que o componente de entrada tem e atualizará quando o evento for acionado.
  4. Salve as configurações de acionamento do evento e repita o processo para quaisquer outros componentes que você deseja ouvir.

Depois de configurar o gatilho do evento, o componente de entrada irá atualizar automaticamente sempre que o evento onChange for acionado nos outros componentes. Isso permite que você crie interfaces dinâmicas que respondam à entrada do usuário em tempo real, tornando mais fácil para os usuários navegarem e interagirem com sua aplicação.

Manipulador de eventos

EventoDescrição:
TrocaQuando um usuário muda o valor de entrada selecionado
FocarQuando um usuário move o cursor do mouse sobre o componente de entrada
BlurQuando um usuário é feito para colocar o valor e deixar de se concentrar no componente cascader

Dado

O componente tem alguns dados comumente usados, que podem ser chamados via {{componentName.propertyName}} no aplicativo.

Nome da propriedadeDescrição:
Valorvalor de entrada do usuário
colorEsquemacor de fundo do botão
desabilitadoum valor booleano indica o status de desabilitado
mostrarNomeo nome deste componente (iie button1)
formaChaveDeDadosa Chave de Dados de Formulário de entrada
hiddenstatus oculto (verdadeiro ou falso)
Etiquetavalor de rótulo
AlinharAlinhamento da etiqueta de entrada (esquerda ou direita)
posiçãoRótuloposição do rótulo de entrada (esquerda ou direita)
largura-rótuloo inteiro que representa a largura da etiqueta.
ComprimentoO valor do comprimento máximo
ComprimentoO valor do comprimento mínimo
espaço reservadovalor do espaço reservado
prefixTextvalor do prefixo de texto
sufixTextvalor do sufixo de texto
somenteLeituraum valor booleano indica o status somente pronto de entrada.
Obrigatórioum valor booleano indica o status necessário de entrada.
regexexpressão regular da entrada
mostrarCaracterísticasum valor booleano indica se a contagem de caracteres da entrada é exibida
dicaTextovalor da dica de texto

Exemplo: {{input1.value}}

Usar caso

Abaixo estão alguns exemplos para personalizar o componente de entrada.

  • Prefixo:

input_prefix

  • Sufixo:

input_suffix

  • Dica:

input_tooltip

  • Padrão:

input_pattern