React Descripción general del área de texto
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
Para empezar a utilizar el componente Área de texto, primero debe registrar su módulo.
Primero, debe instalar el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:
npm install igniteui-react
A continuación, tendrás que importar el IgrTextarea
CSS necesario y registrar su módulo, de la siguiente manera:
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
Con prefix
las ranuras y suffix
podemos añadir diferentes contenidos antes y después del contenido principal del Área de Texto. La helper-text
ranura proporciona una pista colocada debajo del área de texto. En el siguiente ejemplo, crearemos un nuevo campo Área de texto con un prefijo de texto, un sufijo de icono y un texto auxiliar como sugerencia:
Text Area Resizing
Hay tres opciones diferentes de cambio de tamaño de la IgrTextarea
. Cuando se establece en none
, el área de texto no cambia de tamaño y utiliza una barra de desplazamiento para mostrar el texto desbordado. Cuando se establece en vertical
(la opción predeterminada), el área de texto permite al usuario cambiar su tamaño verticalmente. Cuando se establece en auto
, el área de texto muestra todas las entradas del usuario a la vez. El texto de desbordamiento se ajusta a una nueva línea y expande el área de texto automáticamente.
Form Integration
En el ejemplo siguiente se muestra cómo se podría integrar a IgrTextarea
en un formulario.
Styling
El componente Área de texto expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas por la entrada:
Nombre | Descripción |
---|---|
envase | El contenedor principal que contiene todos los elementos de entrada principales. |
aporte | El elemento de entrada nativo. |
etiqueta | El elemento de etiqueta nativo. |
prefijo | El contenedor de prefijo. |
sufijo | El contenedor del sufijo. |
texto de ayuda | El contenedor de texto auxiliar. |
igc-textarea::part(input) {
background-color: rgb(169, 214, 229);
border-color: rgb(42, 111, 151);
}
igc-textarea::part(label) {
color: rgb(1, 42, 74);
}
igc-textarea::part(prefix),
igc-textarea::part(suffix) {
color: white;
border-color: rgb(42, 111, 151);
background-color: rgb(70, 143, 175);
}