Descripción general de la entrada de Blazor

    La entrada Ignite UI for Blazor es un componente en el que el usuario puede introducir datos.

    Blazor Input Example

    Dependencies

    Para comenzar con el componente Entrada, primero debe registrar su módulo.

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbInput 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" />

    <IgbInput DisplayType="@InputType.Email" Label="Subscribe" Placeholder="john.doe@mail.com" />

    Prefix & Suffix

    Conprefix ranuras ysuffix podemos añadir contenido diferente antes y después del contenido principal de la entrada. En el siguiente ejemplo crearemos un nuevo campo de entrada con un prefijo de texto y un sufijo de icono:

    Helper Text

    Lahelper-text ranura proporciona una pista situada debajo de la Entrada. Vamos a añadir algo de texto de ayuda a nuestra entrada del móvil:

    Input Sizing

    Podemos permitir que el usuario cambie el tamaño de usandoIgbInput la--ig-size variable CSS. Si lo hacemos, añadiremos algunos botones de opción para mostrar todos los valores de tamaño. De este modo, cada vez que se selecciona uno, cambiaremos el tamaño de la entrada:

    En el ejemplo anterior hemos demostrado el uso de los siguientes atributos:

    • required- Usado para marcar la entrada según se requiera
    • disabled- Usado para desactivar la entrada
    • readonly- Usado para marcar la entrada como solo lectura

    Styling

    ElIgbInput 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-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}

    API References

    Additional Resources