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ê então precisará importar oIgrInput CSS necessário e registrar seu módulo, assim:

    import { IgrInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

    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 doIgrInput 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

    Styling

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

    API References

    Additional Resources