Visão geral da área de texto React

    A Área de Texto Ignite UI for React representa um controle de edição de texto sem formatação de várias linhas, útil quando você deseja permitir que os usuários insiram uma quantidade considerável de texto de formato livre, por exemplo, um comentário em um formulário de revisão ou comentários.

    React Text Area Example

    Dependencies

    Para começar a usar o componente Área de texto, primeiro você precisa registrar seu módulo.

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

    npm install igniteui-react

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

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

    <IgrTextarea rows="5" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>

    Prefix, Suffix & Helper Text

    Com prefix e suffix slots podemos adicionar conteúdo diferente antes e depois do conteúdo principal da Área de Texto. O helper-text slot fornece uma dica colocada abaixo da área de texto. No exemplo a seguir, criaremos um novo campo Área de Texto com um prefixo de texto, um sufixo de ícone e um texto auxiliar como dica:

    Text Area Resizing

    Existem três opções diferentes de redimensionamento do IgrTextarea. Quando definido como none, a área de texto não é redimensionada e usa uma barra de rolagem para mostrar o texto excedente. Quando definida como vertical (a opção padrão), a área de texto permite que o usuário a redimensione verticalmente. Quando definida como auto, a área de texto mostra todas as entradas do usuário de uma só vez. O texto excedente é quebrado em uma nova linha e expande a área de texto automaticamente.

    Form Integration

    O exemplo abaixo mostra como um IgrTextarea pode ser integrado a um formulário.

    Styling

    O IgrTextarea 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-textarea::part(input) {
  background-color: var(--ig-info-100);
  border-color: var(--ig-primary-400);
}

igc-textarea::part(label) {
  color: var(--ig-gray-800);
}

igc-textarea::part(prefix),
igc-textarea::part(suffix) {
  color: var(--ig-primary-500-contrast);
  border-color: var(--ig-primary-500);
  background-color: var(--ig-primary-500);
}

    API References

    Additional Resources