Visão geral de entrada de Web Components

    A interface de entrada Ignite UI for Web Components é um componente onde o usuário pode inserir dados.

    Web Components Input Example

    Para começar, precisamos importar o IgcInputComponent em nosso arquivo typescript e registrar o componente chamando a função defineComponents() da seguinte maneira:

    import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    Depois de importar o componente IgcInputComponent, estamos prontos para começar a usá-lo, então vamos adicionar nossa primeira entrada.

    <igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>

    Prefix & Suffix

    Com slots prefix e suffix, podemos adicionar conteúdo diferente antes e depois do conteúdo principal do Input. No exemplo a seguir, criaremos um novo campo Input com um prefixo de texto e um sufixo de ícone:

    Helper Text

    O slot helper-text fornece uma dica colocada abaixo do Input. Vamos adicionar algum texto auxiliar ao nosso Input de telefone:

    Input Sizing

    Podemos permitir que o usuário altere o tamanho do IgcInputComponent usando a variável CSS--ig-size. Ao fazer isso, adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Dessa forma, sempre que um for selecionado, alteraremos o tamanho do Input:

    No exemplo acima demonstramos o uso dos seguintes atributos:

    • required- Usado para marcar a entrada como obrigatória
    • disabled- Usado para desabilitar a entrada
    • readonly- Usado para marcar a entrada como somente leitura

    A lista completa de atributos pode ser encontrada na API IgcInputComponent.

    Styling

    O IgcInputComponent componente expõe partes CSS para quase todos os seus elementos internos. A tabela a seguir lista todas as partes CSS expostas:

    Nome Descrição
    container O wrapper principal que contém todos os principais elementos de entrada.
    input O elemento de entrada nativo.
    label O elemento de rótulo nativo.
    prefix O wrapper de prefixo.
    suffix O wrapper de sufixo.
    helper-text O wrapper de texto auxiliar. 
    igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}

    API References

    Additional Resources