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

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

    npm install igniteui-react

    You will then need to import the IgrTextarea and its necessary CSS like so:

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

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

    Prefix, Suffix & Helper Text

    With prefix and suffix slots we can add different content before and after the main content of the Text Area. The helper-text slot provides a hint placed below the Text Area. In the following sample we will create a new Text Area field with a text prefix, an icon suffix and a helper text as a hint:

    Text Area Resizing

    There are three different resize options of the IgrTextarea. When set to none, the text area does not resize and uses a scroll bar to show overflow text. When set to vertical (the default option), the text area lets the user resize it vertically. When set to auto, the text area shows all the user input at once. Overflow text wraps onto a new line and expands the text area automatically.

    Form Integration

    The sample below shows how a IgrTextarea could be integrated into a form.

    Styling

    The IgrTextarea 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-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