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

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

    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" />

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

    <IgbCheckbox />

    [!WARNING] 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>

    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="@ToggleLabelPosition.Before">Label</IgbCheckbox>

    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" />

    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" />

    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" />

    Required

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

    <IgbCheckbox Required="true" />

    Invalid

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

    <IgbCheckbox Invalid="true" />

    Disabled

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

    <IgbCheckbox Disabled="true" />

    Forms

    Puede usar los Name atributos y Value cuando use la casilla de verificación con Form.

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

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

    API References

    Additional Resources