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

The IgcInputComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

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);
}