Descripción general del área de texto Blazor

    La Ignite UI for Blazor representa un control de edición de texto simple de varias líneas, útil cuando desea permitir que los usuarios ingresen una cantidad considerable de texto de formato libre, por ejemplo, un comentario en un formulario de revisión o comentarios.

    Ejemplo de área de texto Blazor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor 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.

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbTextarea. Lo siguiente debe colocarse en el archivo wwwroot/index.html en un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml en un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor
    <IgbTextarea Rows="5" Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>
    razor

    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:

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Cambio de tamaño del área de texto

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Integración de formularios

    En el ejemplo siguiente se muestra cómo se puede integrar a IgbTextarea en un formulario.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Estilo

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales