Visão geral da entrada React

A entrada Ignite UI for React é um componente onde o usuário pode inserir dados.

React Input Example

Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

npm install igniteui-react

Você precisará importar o IgrInput CSS necessário e registrar seu módulo, assim:

import { IgrInputModule, IgrInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrInputModule.register();

<IgrInput type="email" label="Subscribe"></IgrInput>

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 IgrInput Usando o--ig-size Variável CSS. Para 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 da entrada:

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

Styling

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