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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <h1>Greetings, @userName</h1>
    <IgbInput @bind-value="userName" Label="Input Name" Placeholder="eg. John Doe">
        <span slot="prefix">User</span>
    </IgbInput>
</div>

@code {
    

    string userName = "Bradley";

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Dependencies

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

// in Program.cs file

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

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

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

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

Prefix & Suffix

Con espacios prefix y suffix podemos agregar diferentes contenidos antes y después del contenido principal del Input. En el siguiente ejemplo crearemos un nuevo campo de entrada con un prefijo de texto y un sufijo de icono:

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbIconModule),
                typeof(IgbInputModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbInput DisplayType="@InputType.Tel" Label="Phone" Placeholder="888 123 4567">
        <span slot="prefix">+359</span>
        <IgbIcon @ref="IconRef" slot="suffix" IconName="phone" Collection="material"/>
    </IgbInput>
</div>

@code {
    

    private IgbIcon IconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            string phoneIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>";
            await this.IconRef.RegisterIconFromTextAsync("phone", phoneIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Helper Text

La ranura helper-text proporciona una pista colocada debajo de la Entrada. Agreguemos un texto de ayuda a la entrada de nuestro teléfono:

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbIconModule),
                typeof(IgbInputModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbInput DisplayType="@InputType.Tel" Label="Phone">
        <span slot="prefix">+359</span>
        <IgbIcon @ref="IconRef" slot="suffix" IconName="phone" Collection="material"/>
        <span slot="helper-text">Ex.: +359 888 123 456</span>
    </IgbInput>
</div>

@code {
    

    private IgbIcon IconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            string phoneIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>";
            await this.IconRef.RegisterIconFromTextAsync("phone", phoneIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Input Sizing

Podemos permitir que el usuario cambie el tamaño de IgbInput usando la variable CSS--ig-size. Para hacer esto, agregaremos algunos botones de opción para mostrar todos los valores de tamaño. De esta manera, cada vez que se seleccione uno, cambiaremos el tamaño de la Entrada:

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
);
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
</style>
<div class="container sample center">

    <style>
        #radioGroup {
            display: flex;
            margin: 0 auto;
            width: 15%;
        }
    </style>

    <IgbRadioGroup id="radioGroup" Alignment="@RadioGroupAlignment.Horizontal">
        <IgbRadio name="size" Value="Small" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Small</IgbRadio>
        <IgbRadio name="size" Value="Medium" LabelPosition="@RadioLabelPosition.After" Checked="true" Change="@OnRadioOptionClick">Medium</IgbRadio>
        <IgbRadio name="size" Value="Large" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Large</IgbRadio>
    </IgbRadioGroup>

    <IgbInput class="@InputSize" DisplayType="@InputType.Text" Label="Required" Value="This input is required" Required="true" />
    <IgbInput class="@InputSize" DisplayType="@InputType.Text" Label="Disabled" Value="This input is disabled" Disabled="true" />
    <IgbInput class="@InputSize" DisplayType="@InputType.Text" Label="Readonly" Value="This input is readonly" ReadOnly="true" />
</div>

@code {
    

    private string InputSize { get; set; } = "size-medium";

    public void OnRadioOptionClick(IgbRadioChangeEventArgs e)
    {
        this.InputSize = $"size-{e.Detail.Value.ToLower()}";
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}css

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

required: se utiliza para marcar la entrada como requerida
disabled: se utiliza para deshabilitar la entrada.
readonly: se utiliza para marcar la entrada como de solo lectura

Styling

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbIconModule),
                typeof(IgbInputModule)
  );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <style>
        igc-input::part(input) {
            background-color: rgb(169, 214, 229);
            border-color: rgb(42, 111, 151);
        }

        igc-input::part(label) {
            color: rgb(1, 42, 74);
        }

        igc-input::part(prefix),
        igc-input::part(suffix) {
            color: white;
            border-color: rgb(42, 111, 151);
            background-color: rgb(70, 143, 175);
        }
    </style>

    <IgbInput DisplayType="@InputType.Tel" Label="Phone" Placeholder="888 123 4567">
        <span slot="prefix">+359</span>
        <IgbIcon @ref="IconRef" slot="suffix" IconName="phone" Collection="material"/>
    </IgbInput>
</div>

@code {
    

    private IgbIcon IconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            string phoneIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>";
            await this.IconRef.RegisterIconFromTextAsync("phone", phoneIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css