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 oIgcInputComponent em nosso arquivo typescript e registrar o componente chamando a função defineComponents() da seguinte forma:

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 Comecando.

Depois de importarmos oIgcInputComponent componente, 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

Comprefix os slots de Ysuffix, podemos adicionar conteúdo diferente antes e depois do conteúdo principal da Entrada. No exemplo a seguir, criaremos um novo campo de entrada com um prefixo de texto e um sufixo de ícone:

Helper Text

Ohelper-text slot fornece uma dica colocada abaixo do Input. Vamos adicionar um texto de ajuda ao nosso telefone. Entrada:

Input Sizing

Podemos permitir que o usuário altere o tamanho doIgcInputComponent usando a--ig-size variável CSS. Fazendo isso, adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Assim, sempre que um for selecionado, mudaremos o tamanho da Entrada:

No exemplo acima demonstramos o uso dos seguintes atributos:

required- Usado para marcar a entrada conforme necessário
disabled- Usado para desabilitar a entrada
readonly- Usado para marcar a entrada como somente leitura

A lista completa de atributos pode ser encontrada naIgcInputComponent API.

Styling

OIgcInputComponent componente expõe partes do 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);
}