Descripción general del área de texto de Web Components

    El área de texto Ignite UI for Web Components 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.

    Web Components Text Area Example

    Dependencies

    Para empezar, necesitamos importar elIgcTextareaComponent en nuestro archivo typescript y registrar el componente llamando a la función defineComponents() de la siguiente manera:

    import { defineComponents, IgcTextareaComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcTextareaComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    Después de importar elIgcTextareaComponent componente, estamos listos para empezar a usarlo, así que vamos a añadir nuestro primer Área de Texto.

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

    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 laIgcTextareaComponent. 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.

    La lista completa de atributos del área de texto se puede encontrar enIgcTextareaComponent la API.

    Form Integration

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

    Styling

    ElIgcTextareaComponent 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