Descripción general del área de texto React

El área de texto Ignite UI for React representa un control de edición de texto sin formato de varias líneas, útil cuando se desea permitir que los usuarios escriban una cantidad considerable de texto de forma libre, por ejemplo, un comentario en un formulario de revisión o comentarios.

React Ejemplo de área de texto

dependencias

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente 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.

Estilismo

The IgrTextarea component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

Nombre	Descripción
`container`	El contenedor principal que contiene todos los elementos de entrada principales.
`input`	El elemento de entrada nativo.
`label`	El elemento de etiqueta nativo.
`prefix`	El contenedor de prefijo.
`suffix`	El contenedor del sufijo.
`helper-text`	El contenedor 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);
}