Descripción general del área de texto Blazor

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

    Blazor Text Area Example

    Dependencies

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbTextarea componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

    <IgbTextarea Rows="5" Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>

    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 laIgbTextarea. 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 enIgbTextarea un formulario.

    Styling

    ElIgbTextarea 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