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.

Ejemplo de área de texto Web Components

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

defineComponents(IgcTextareaComponent);

export class TextareaOverview {
    constructor() {}
}

new TextareaOverview();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Overview</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea rows="3" label="Tell us your story:">It was a dark and stormy night...</igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

dependencias

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

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

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>
html

Prefijo, sufijo y texto auxiliar

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:

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

defineComponents(IgcIconComponent, IgcTextareaComponent);

export class TextareaSlots {
    constructor() {
        registerIconFromText(
            "feedback",
            `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`
        );
    }
}

new TextareaSlots();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Slots</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea label="Your feedback">
                    <igc-icon name="feedback" slot="prefix" aria-hidden="true"></igc-icon>
                    <p slot="helper-text">Give us a short description of what you liked/disliked</p>
                </igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Cambio de tamaño del área de texto

Hay tres opciones diferentes de cambio de tamaño. 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.

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

defineComponents(IgcTextareaComponent);

export class TextareaResize {
    constructor() {}
}

new TextareaResize();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Resize</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea label="Resize: none" resize="none">
                    <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
                </igc-textarea>
                <igc-textarea label="Resize: vertical (default)">
                    <p slot="helper-text">This textarea lets the user resize vertically.</p>
                </igc-textarea>
                <igc-textarea label="Resize: auto" resize="auto">
                    <p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
                </igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

Integración de formularios

En el ejemplo siguiente se muestra cómo se podría integrar a IgcTextareaComponent en un formulario.

import { defineComponents, IgcTextareaComponent, IgcButtonComponent, IgcToastComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcTextareaComponent, IgcButtonComponent, IgcToastComponent);

export class TextareaFormIntegration {
    constructor() {
        const toast = document.querySelector("#submitted") as IgcToastComponent;
        const form = document.querySelector("#form") as HTMLFormElement;

        form.addEventListener("submit", (e: SubmitEvent) => {
            e.preventDefault();
            toast.show();
        });
    }
}

new TextareaFormIntegration();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Form Integration</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <form id="form">
                    <igc-textarea rows="3" name="user_feedback" label="Your review" required></igc-textarea>
                    <div class="controls">
                        <igc-button type="submit">Submit review</igc-button>
                        <igc-button type="reset" variant="outlined">Reset</igc-button>
                    </div>
                    <igc-toast id="submitted" position="top" display-time="1e3">Your review was submitted</igc-toast>
                </form>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.controls {
    margin-top: 1rem;
}css

Estilo

El IgcTextareaComponent componente expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran 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);
}
css

import { defineComponents, IgcIconComponent, IgcTextareaComponent, registerIconFromText } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./textarea.css";

defineComponents(IgcIconComponent, IgcTextareaComponent);

export class TextareaStyling {
    constructor() {
        registerIconFromText(
            "feedback",
            `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`
        );
    }
}

new TextareaStyling();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Styling</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample center">
                <igc-textarea label="Steps to reproduce">
                    <igc-icon name="feedback" slot="prefix" aria-hidden="true"></igc-icon>
                    <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
                </igc-textarea>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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