Blazor Descripción general de las casillas de verificación

La casilla de verificación Blazor es un componente que le permite agregar casillas de verificación a sus aplicaciones Blazor. Se comporta como una casilla de verificación HTML estándar, lo que permite a los usuarios seleccionar estados básicos marcados y no marcados o un estado indeterminado adicional. También obtiene control total sobre el estilo del componente de casilla de verificación Blazor y la capacidad de usarlo con formularios.

Checkbox 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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox>Checkbox</IgbCheckbox>
</div>

@code {
    

}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.

Usage

En esencia, IgbCheckbox permite elegir entre el estado seleccionado o no seleccionado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.

Antes de utilizar IgbCheckbox, debe registrarlo de la siguiente manera:

// in Program.cs file

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

También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbCheckbox 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

La forma más sencilla de empezar a utilizar IgbCheckbox es la siguiente:

<IgbCheckbox />
razor

The IgbCheckbox component doesn't work with the standard <form> element. Use Form instead.

Examples

Label

Para proporcionar una etiqueta significativa para la casilla de verificación, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

<IgbCheckbox>Label</IgbCheckbox>
razor

Puede especificar si la etiqueta debe colocarse antes o después de la casilla de verificación configurando el atributo label-position de la casilla de verificación. Los valores permitidos son before y after (predeterminado):

<IgbCheckbox LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbCheckbox>
razor

La casilla de verificación también puede estar etiquetada por elementos externos a la casilla de verificación. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.

<span id="checkbox-label">Label</span>
<IgbCheckbox AriaLabelledby="checkbox-label" />
razor

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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .wrapper {
            display: flex;
            align-items: center;
        }
    </style>

    <div class="wrapper">
        <span id="checkbox-label">Label</span>
        <IgbCheckbox AriaLabelledby="checkbox-label" LabelPosition=CheckboxBaseLabelPosition.Before />
    </div>
</div>

@code {
    

}razor

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

Checked

Puede utilizar el atributo Checked del componente para determinar si la casilla de verificación debe activarse o desactivarse de forma predeterminada.

<IgbCheckbox Checked="true" />
razor

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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Checked=true>Label</IgbCheckbox>
</div>

@code {
    

}razor

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

Indeterminate

Puede utilizar la propiedad Indeterminate del componente para establecer el valor de la casilla de verificación en verdadero ni falso.

<IgbCheckbox Indeterminate="true" />
razor

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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Indeterminate=true>Label</IgbCheckbox>
</div>

@code {
    

}razor

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

Required

Puede utilizar la propiedad Required para marcar la casilla de verificación según sea necesario.

<IgbCheckbox Required="true" />
razor

Invalid

Puede utilizar el atributo Invalid para marcar la casilla de verificación como no válida.

<IgbCheckbox Invalid="true" />
razor

Disabled

Puede utilizar el atributo Disabled para desactivar la casilla de verificación.

<IgbCheckbox Disabled="true" />
razor

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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Disabled=true>Label</IgbCheckbox>
</div>

@code {
    

}razor

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

Forms

Puede utilizar los name atributos y value cuando utilice la casilla de verificación con Form.

<IgbCheckbox Name="wifi" Value="enabled" />
razor

Styling

El IgbCheckbox componente expone cuatro partes CSS que podemos usar para el estilo:

Nombre	Descripción
`base`	El envoltorio base de la casilla de verificación.
`control`	El elemento de entrada de la casilla de verificación.
`indicator`	El icono del indicador de casilla de verificación.
`label`	La etiqueta de la casilla de verificación.

Con estas cuatro partes de CSS, tenemos control total sobre el estilo de las casillas de verificación.

igc-checkbox::part(indicator) {
  stroke: var(--ig-secondary-500-contrast);
}

igc-checkbox::part(control checked)::after {
  border-radius: 4px;
  background: var(--ig-secondary-500);
}
css