Web Components Descripción general de las casillas de verificación

    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 capacidad de usarlo con formularios.

    Checkbox Example

    Usage

    At its core, the IgcCheckboxComponent allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification in the Material Design guidelines.

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    You will then need to import the IgcCheckboxComponent, its necessary CSS, and register its module, like so:

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

defineComponents(IgcCheckboxComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    The simplest way to start using the IgcCheckboxComponent is as follows:

    <igc-checkbox></igc-checkbox>

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

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

    You can specify if the label should be positioned before or after the checkbox toggle by setting the label-position attribute of the checkbox. Allowed values are before and after (default):

    <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

    You can use the checked attribute of the component to determine whether the checkbox should be toggled on or off by default.

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

    Indeterminate

    You can use the indeterminate property of the component to set the checkbox's value to neither true nor false.

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

    Required

    You can use the required property to mark the checkbox as required.

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

    Invalid

    You can use the invalid attribute to mark the checkbox as invalid.

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

    Disabled

    You can use the disabled attribute to disable the checkbox.

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

    Forms

    You can use the name and value attributes when using the checkbox with Form.

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

    Styling

    The IgcCheckboxComponent component exposes four CSS parts which we can use for styling:

    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