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 Text Area Example

    Dependencies

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrTextarea CSS necesario de la siguiente manera:

    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

    Conprefix las ranuras ysuffix podemos añadir contenido diferente antes y después del contenido principal del Área de Texto. Lahelper-text ranura proporciona una pista situada debajo del área de texto. En el siguiente ejemplo crearemos un nuevo campo de Área de Texto con un prefijo de texto, un sufijo de icono y un texto auxiliar como pista:

    Text Area Resizing

    Hay tres opciones diferentes de redimensionamiento de laIgrTextarea. Cuando se configura como asínone, el área de texto no se redimensiona y utiliza una barra de desplazamiento para mostrar el texto de desbordamiento. Cuando se configura comovertical (la opción predeterminada), el área de texto permite al usuario redimensionarla verticalmente. Cuando se configura en ,auto el área de texto muestra todas las entradas del usuario a la vez. El texto de desbordamiento se envuelve en una nueva línea y expande automáticamente el área de texto.

    Form Integration

    El ejemplo siguiente muestra cómo podría integrarse enIgrTextarea un formulario.

    Styling

    ElIgrTextarea componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas:

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

    API References

    Additional Resources