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, permiteIgbCheckbox elegir entre estados seleccionados y no seleccionados. El diseño por defecto se realiza según la especificación de controles de selección en las directrices de Diseño de Materiales.

    Antes de usarlosIgbCheckbox, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbCheckbox componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor 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 usar elIgbCheckbox uso 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>

    Puedes especificar si la etiqueta debe colocarse antes o después del interruptor de casilla de verificación configurando ellabel-position atributo de la casilla. Los valores permitidos sonbefore yafter (por defecto):

    <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

    Puedes usar elChecked atributo del componente para determinar si la casilla debe estar activada o desactivada por defecto.

    <IgbCheckbox Checked="true" />

    Indeterminate

    Puedes usar laIndeterminate propiedad del componente para establecer el valor de la casilla en no verdadero ni falso.

    <IgbCheckbox Indeterminate="true" />

    Required

    Puedes usar laRequired propiedad para marcar la casilla según sea necesario.

    <IgbCheckbox Required="true" />

    Invalid

    Puedes usar elInvalid atributo para marcar la casilla como inválida.

    <IgbCheckbox Invalid="true" />

    Disabled

    Puedes usar elDisabled atributo para desactivar la casilla de selección.

    <IgbCheckbox Disabled="true" />

    Forms

    Puedes usar losName atributos yValue cuando uses la casilla de verificación conForm.

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

    Styling

    ElIgbCheckbox componente expone cuatro partes CSS que podemos usar para el estilismo:

    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) {
  --tick-color: var(--ig-secondary-500-contrast); /* check icon color */
}

igc-checkbox::part(control checked)::after {
  --fill-color: var(--ig-secondary-500); /* checkbox background color */
}

    API References

    Additional Resources