Descripción general de la casilla de verificación Blazor

    Blazor Checkbox 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 posibilidad 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 componente IgbCheckbox. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto 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="@CheckboxBaseLabelPosition.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 utilizar los name atributos y value cuando utilice la casilla de verificación con Form.

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

    Styling

    El componente de casilla de verificación expone varias partes CSS (base, control, indicator y label) para brindarle control total sobre su estilo.

    igc-checkbox::part(indicator) {
  &::after {
    padding: 12px;
    border-radius: 14px;
  }
}

igc-checkbox::part(indicator checked) {
  border-radius: 0;

  &::after {
    background: olive;
    border-color: olive;
    stroke: beige;
  }
}

    API References

    Additional Resources