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 Ejemplo de casilla de verificación

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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxCheckboxComponent } from 'igniteui-angular';

@Component({
    selector: 'app-checkbox-sample-1',
    styleUrls: ['./checkbox-sample-1.component.scss'],
    templateUrl: './checkbox-sample-1.component.html',
    imports: [IgxCheckboxComponent]
})
export class CheckboxSample1Component { }
tsコピー

<igx-checkbox [checked]="true">
    Simple checkbox
</igx-checkbox>
htmlコピー

:host {
    display: flex;
    padding: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Casilla de verificación Primeros pasos con Ignite UI for Angular

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
cmd

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

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

// app.module.ts

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

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

Alternativamente, a partir de 16.0.0 puede importar IgxCheckboxComponent 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 {}
typescript

Ahora que tiene el módulo o componente Ignite UI for Angular Checkbox importado, puede comenzar a usar el igx-checkbox componente.

Uso del componente de casilla de verificación Angular

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

Propiedades de casilla de verificación

Mejoremos el código anterior vinculando las propiedades de la casilla de verificación a algunos datos. Digamos que tenemos una serie de objetos de tarea, cada uno con dos propiedades: descripción y listo. Puede vincular la propiedad marcada del componente de casilla checked a la propiedad realizada del objeto de tarea subyacente. De manera análoga, puede vincular la propiedad value a la descripción. Opcionalmente, también puede vincular el evento change y agregar alguna lógica personalizada en el método del controlador 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
    }
}
typescript

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

Añade algunos estilos:

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

El resultado final sería algo así:

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';

import { IgxCheckboxComponent } from 'igniteui-angular';

@Component({
    selector: 'app-checkbox-sample-2',
    styleUrls: ['./checkbox-sample-2.component.scss'],
    templateUrl: './checkbox-sample-2.component.html',
    imports: [IgxCheckboxComponent]
})
export class CheckboxSample2Component {
    public tasks = [
        { done: true, description: 'Research' },
        { done: true, description: 'Implement' },
        { done: false, description: 'Test' }
    ];
}
tsコピー

@for (task of tasks; track task) {
  <igx-checkbox [checked]="task.done">
    {{ task.description }}
  </igx-checkbox>
}

htmlコピー

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-checkbox {
    margin-top: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

Posicionamiento de etiquetas

Puede colocar la etiqueta usando la propiedad labelPosition de la casilla de verificación:

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

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

Casilla de verificación indeterminada en Angular

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

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

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

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;
}
scss

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;
        }
    }
}
ts

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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxCheckboxComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';


@Component({
    selector: 'app-checkbox-sample-3',
    styleUrls: ['./checkbox-sample-3.component.scss'],
    templateUrl: './checkbox-sample-3.component.html',
    imports: [IgxCheckboxComponent, FormsModule]
})
export class CheckboxSample3Component {
    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;
            }
        }
    }
}
tsコピー

<igx-checkbox
  [readonly]="true"
  [(ngModel)]="masterCheckbox.checked"
  [indeterminate]="masterCheckbox.indeterminate"
  (click)="toggleAll()"
  >
  All done
</igx-checkbox>
@for (task of tasks; track task) {
  <igx-checkbox class="tasks" [(ngModel)]="task.done">
    {{ task.description }}
  </igx-checkbox>
}
htmlコピー

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-checkbox {
    margin-top: 16px;
}

igx-checkbox.tasks {
    padding-left: 10px;
}
scssコピー

Edit in: CodesandboxStackBlitz

Estilo

Para comenzar a diseñar la casilla de verificación, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

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

Luego, creamos un nuevo tema que extiende el checkbox-theme y usamos algunos de sus parámetros para diseñar los elementos de la casilla de verificación:

// in styles.scss
$custom-checkbox-theme: checkbox-theme(
  $border-radius: 10px,
  $label-color: #011627,
  $empty-color: #ECAA53,
  $fill-color: #ECAA53,
  $tick-color: #011627,
);
scss

El último paso es incluir el tema del componente en nuestra aplicación.

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

Manifestación

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxCheckboxComponent } from 'igniteui-angular';

@Component({
    selector: 'app-checkbox-styling',
    styleUrls: ['./checkbox-styling.component.scss'],
    templateUrl: './checkbox-styling.component.html',
    imports: [IgxCheckboxComponent]
})
export class CheckboxStylingComponent { }
tsコピー

<igx-checkbox [checked]="true">
    Styled checkbox
</igx-checkbox>
htmlコピー

@use "layout.scss";
@use "igniteui-angular/theming" as *;

$custom-checkbox-theme: checkbox-theme(
  $border-radius: 10px,
  $label-color: #011627,
  $empty-color: #ecaa53,
  $fill-color: #ecaa53,
  $tick-color: #011627,
);

@include css-vars($custom-checkbox-theme);
 scssコピー

Edit in: CodesandboxStackBlitz

Referencias de API

• Componente IgxCheckbox
• Estilos de componentes IgxCheckbox
• Posición de etiqueta

Dependencias temáticas

• Tema IgxRipple

Recursos adicionales

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub