Descripción general del componente de casilla de verificación Angular

    Angular Checkbox es una extensión del tipo de entrada estándar de HTML, que ofrece una funcionalidad similar, solo que mejorada con elementos como animaciones y estilos de Material Design. Permite a los usuarios elegir una o varias opciones predefinidas, principalmente en formularios y encuestas.

    El componente Ignite UI for Angular casilla de verificación es un control de selección que permite a los usuarios realizar una elección binaria para una condición determinada. Se comporta de manera similar a la casilla de verificación del navegador nativo. Algunas de las características que ofrece son opciones de estilo, temas, estados marcados, no marcados e indeterminados, y otros.

    Angular Checkbox Example

    Vea la casilla de verificación en acción en el siguiente ejemplo de casilla de verificación Angular a continuación.

    Getting Started with Ignite UI for Angular Checkbox

    Para comenzar con el componente Ignite UI for Angular Checkbox, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    The next step is to import the IgxCheckboxModule in the app.module.ts file:

    // app.module.ts

import { IgxCheckboxModule } from 'igniteui-angular';
// import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxCheckboxModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importarlosIgxCheckboxComponent como una dependencia independiente.

    // home.component.ts

import { IgxCheckboxComponent } from 'igniteui-angular';
// import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-checkbox [checked]="true">
        Simple checkbox
    </igx-checkbox>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxCheckboxComponent]
})
export class HomeComponent {}

    Now that you have the Ignite UI for Angular Checkbox module or component imported, you can start using the igx-checkbox component.

    Using the Angular Checkbox Component

    Para marcar la casilla en la demostración, agregue el siguiente código dentro de la plantilla del componente:

    <igx-checkbox [checked]="true">
    Simple checkbox
</igx-checkbox>

    Checkbox properties

    Let's enhance the code above by binding the checkbox properties to some data. Say, we have an array of task objects, each having two properties: description and done. You can bind the checkbox component checked property to the underlying task object done property. Analogically, you can bind the value property to description. Optionally, you can also bind the change event and add some custom logic in the provided event handler method.

    // tasks.component.ts
@Component({...})
export class HomeComponent {
    public tasks = [
        { done: true, description: 'Research' },
        { done: true, description: 'Implement' },
        { done: false, description: 'Test' }
    ];

    public statusChanged() {
        // event handler logic
    }
}

    Mejore la plantilla del componente agregando una casilla de verificación para cada tarea y luego configurando los enlaces de propiedad correspondientes:

    <!--tasks.component.html-->
<igx-checkbox *ngFor="let task of tasks" [checked]="task.done">
    {{ task.description }}
</igx-checkbox>

    Añade algunos estilos:

    //task.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}

    El resultado final sería algo así:

    Label Positioning

    You can position the label using the checkbox's labelPosition property:

    <igx-checkbox labelPosition="before"></igx-checkbox>

    If the labelPosition is not set, the label will be positioned after the checkbox.

    Indeterminate Checkbox in Angular

    In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. In this state the checkbox is neither checked, nor unchecked. This is set using the checkbox's indeterminate property:

    <igx-checkbox [indeterminate]="true"></igx-checkbox>

    Podemos crear una aplicación que tenga una lista de tareas que se deben realizar y una casilla de verificación principal en Angular que se marcará solo si se completan todas las tareas. Actualicemos el ejemplo anterior. Empecemos con la plantilla:

    <!-- app.component.html -->
<igx-checkbox
    [readonly]="true"
    [(ngModel)]="masterCheckbox.checked"
    [(indeterminate)]="masterCheckbox.indeterminate"
    (click)="toggleAll()"
>
All done
</igx-checkbox>
<igx-checkbox class="tasks" *ngFor="let task of tasks" [(ngModel)]="task.done">
    {{ task.description }}
</igx-checkbox>

    A continuación, vamos a sangrar las subtareas, para que sea más visual que forman parte del mismo grupo.

    // app.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}
igx-checkbox.tasks {
    padding-left: 10px;
}

    Y finalmente, crearemos la lógica de nuestra aplicación:

    // app.component.ts
public tasks = [
    { done: true, description: 'Research' },
    { done: true, description: 'Implement' },
    { done: false, description: 'Test' }
];
public get masterCheckbox() {
    return this.tasks.reduce(
        (acc, curr, idx, arr) => {
            acc.checked = acc.checked && curr.done;
            acc.done = curr.done ? acc.done + 1 : acc.done;
            acc.indeterminate = acc.done === arr.length ? false : !!acc.done;
            return acc;
        },
        {
            checked: true,
            done: 0,
            indeterminate: false
        }
    );
}
public toggleAll() {
    if (this.masterCheckbox.checked) {
        for (const task of this.tasks) {
            task.done = false;
        }
    } else {
        for (const task of this.tasks) {
            task.done = true;
        }
    }
}

    Una vez hecho todo esto, nuestra aplicación debería verse así:

    Estilismo

    Checkbox Theme Property Map

    Cuando modificas una propiedad primaria, todas las propiedades dependientes relacionadas se actualizan automáticamente:

    Propiedad principal Propiedad dependiente Descripción
    $empty-color
    		$empty-color-flotador El color del borde sin marcar al pasar el cursor.
    $focus-contorno-color (solo variante índigo) El color del contorno de enfoque para la variante índigo.
    $fill color
    		$fill-color-flotador El borde y los colores de relleno comprobados al pasar el cursor.
    $tick-color El color de la marca marcada.
    $focus-color de borde El color del borde de enfoque.
    $disabled-color-indeterminado Los colores de borde y relleno desactivados en estado indeterminado.
    $focus-contorno-color (solo variante bootstrap) El color de contorno de enfoque para la variante bootstrap.
    $focus-contorno-color enfocado (solo variante índigo) El contorno de enfoque para el estado enfocado en la variante índigo.
    $error color
    		$error-color-flotador Los colores del borde y de relleno en estado inválido al pasar el cursor al pasar el cursor.
    $focus-esquema-color-error El contorno del enfoque en estado de error.
    $label-color $label-color-flotador El color del texto para la etiqueta está en el pasador.

    Nota: Los resultados reales pueden variar según la variante del tema.

    To get started with styling the checkbox, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Then, we create a new theme that extends the checkbox-theme and setting parameters to style the checkbox elements. By specifying the $empty-color and $fill-color, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed.

    // in styles.scss
$custom-checkbox-theme: checkbox-theme(
    $empty-color: #ecaa53,
    $fill-color: #ecaa53,
    $border-radius: 5px
);

    Finalmente, incluya el tema personalizado en su aplicación:

    @include css-vars($custom-checkbox-theme);

    In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the SAP UI5 design system.

    Styling with Tailwind

    Puedes decorarloscheckbox usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

    Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    El archivo de utilidad incluye variantes tantolight comodark de tema.

    • Usalight-* clases para el tema ligero.
    • Usadark-* clases para el tema oscuro.
    • Añadir el nombre del componente después del prefijo, por ejemplo, ,light-checkbox,dark-checkbox.

    Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

    Puedes encontrar la lista completa de propiedades en el tema de casillas. La sintaxis es la siguiente:

    <igx-checkbox
class="!light-checkbox
![--empty-color:#7B9E89]
![--fill-color:#7B9E89]"
[checked]="true">
    Styled checkbox
</igx-checkbox>
    Note

    El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

    Al final, tu casilla debería verse así:

    API References

    Theming Dependencies

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.