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.

    El siguiente paso es importar elIgxCheckboxModule archivo en el app.module.ts:

    // app.module.ts

import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
// 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/checkbox';
// 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 {}

    Ahora que tienes importado el módulo o componente Ignite UI for Angular Checkbox, puedes empezar a usar eligx-checkbox componente.

    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

    Vamos a mejorar el código anterior asignando las propiedades de las casillas de verificación a algunos datos. Supongamos que tenemos una matriz de objetos de tarea, cada uno con dos propiedades: descripción y listo. Puedes asignar la propiedad de componentechecked de la casilla de verificación a la propiedad subyacente de objeto de tarea done. De forma análoga, puedes vincular lavalue propiedad a la descripción. Opcionalmente, también puedes asignar elchange evento y añadir algo de lógica personalizada en el método de gestor de eventos proporcionado.

    // 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

    Puedes colocar la etiqueta usando la propiedad delabelPosition la casilla:

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

    Si no estálabelPosition activado, la etiqueta se colocará después de la casilla de verificación.

    Indeterminate Checkbox in Angular

    Además de los estados marcados y no marcados, hay un tercer estado en el que puede estar una casilla: indeterminado. En este estado, la casilla no está marcada ni desmarcada. Esto se establece usando la propiedad deindeterminate la casilla:

    <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.

    Para empezar a estilizar la casilla, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mixin:

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

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

    Luego, creamos un nuevo tema que amplía loscheckbox-theme parámetros de y para estilizar los elementos de casilla de verificación. Al especificar el$empty-color y$fill-color, el tema calcula automáticamente los colores de estado apropiados y los primeros planos de contraste. Aún puedes sobrescribir cualquier otro parámetro con valores personalizados según lo necesites.

    // 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);

    En el ejemplo siguiente, puedes ver cómo usar el componente de casillas de verificación con variables CSS personalizadas te permite crear un diseño que visualmente se asemeja a la casilla de verificación utilizada en elSAP UI5 sistema de diseño.

    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.