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

    You will also need to link an additional CSS file to apply the styling to the IgbInput component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

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

    Prefix & Suffix

    With prefix and suffix slots we can add different content before and after the main content of the Input. In the following sample we will create a new Input field with a text prefix and an icon suffix:

    Helper Text

    The helper-text slot provides a hint placed below the Input. Let's add some helper text to our phone Input:

    Input Sizing

    We can allow the user to change the size of the IgbInput using the --ig-size CSS variable. То do this, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the Input:

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

    • required - Used to mark the input as required
    • disabled - Used to disable the input
    • readonly - Used to mark the input as readonly

    Styling

    The IgbInput component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    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