Web Components Descripción general del área de texto

    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 a utilizar el componente Área de texto, primero debe registrar su módulo.

    Para comenzar, necesitamos importar el IgcTextareaComponent en nuestro archivo de 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 obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    Después de importar el IgcTextareaComponent componente, estamos listos para comenzar a usarlo, así que agreguemos nuestra primera á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

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

    La lista completa de atributos del área de texto se puede encontrar en IgcTextareaComponent API.

    Form Integration

    En el ejemplo siguiente se muestra cómo se podría integrar a IgcTextareaComponent 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);
}

    API References

    Additional Resources