Descripción general de la casilla de verificación Web Components

    La casilla de verificación Web Components es un componente que le permite agregar casillas de verificación a sus aplicaciones Web Components. 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 Web Components y la posibilidad de usarlo con formularios.

    Checkbox Example

    Usage

    En esencia, IgcCheckboxComponent 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.

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Luego necesitarás importar IgcCheckboxComponent, su CSS necesario y registrar su módulo, así:

    import { defineComponents, IgcCheckboxComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    La forma más sencilla de comenzar a utilizar IgcCheckboxComponent es la siguiente:

    <igc-checkbox></igc-checkbox>

    [!WARNING] The IgcCheckboxComponent component doesn't work with the standard <form> element. Use IgcFormComponent 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:

    <igc-checkbox>Label</igc-checkbox>

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

    <igc-checkbox label-position="before">Label</igc-checkbox>

    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>
<igc-checkbox aria-labelledby="checkbox-label"></igc-checkbox>

    Checked

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

    <igc-checkbox checked></igc-checkbox>

    Indeterminate

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

    <igc-checkbox indeterminate></igc-checkbox>

    Required

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

    <igc-checkbox required></igc-checkbox>

    Invalid

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

    <igc-checkbox invalid></igc-checkbox>

    Disabled

    Puede utilizar el atributo disabled para deshabilitar la casilla de verificación.

    <igc-checkbox disabled></igc-checkbox>

    Forms

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

    <igc-checkbox name="wifi" value="enabled"></igc-checkbox>

    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