Descripción general del componente de casilla de verificación Angular
Angular Checkbox es una extensión de la casilla de verificación de tipo de entrada HTML estándar, que proporciona una funcionalidad similar, solo que mejorada con elementos como animaciones y estilo de Material Design. Permite a los usuarios elegir una o varias opciones predefinidas, principalmente en formularios y encuestas.
El componente Ignite UI for Angular Checkbox es un control de selección que permite a los usuarios realizar una elección binaria para una determinada condición. 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, entre otras.
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 a la 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 {}
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 {}
Ahora que ha importado el módulo o componente Ignite UI for Angular Checkbox, puede comenzar a usar el componente igx-checkbox.
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
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
}
}
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
Puede colocar la etiqueta usando la propiedad labelPosition de la casilla de verificación:
<igx-checkbox labelPosition="before"></igx-checkbox>
Si no se establece labelPosition, la etiqueta se colocará después de la casilla de verificación.
Indeterminate Checkbox in 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>
Podemos crear una aplicación que tenga una lista de tareas que deben realizarse y una casilla de verificación maestra en Angular que se marcará solo si se completan todas las tareas. Actualicemos el ejemplo anterior. Comenzando 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í:
Angular Checkbox Styling
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';
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,
);
Including Themes
El último paso es incluir el tema del componente en nuestra aplicación.
Si $legacy-support está configurado en true, incluya el tema del componente así:
@include checkbox($custom-checkbox-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep
:host {
::ng-deep {
@include checkbox($custom-checkbox-theme);
}
}
Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:
@include css-vars($custom-checkbox-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.
:host {
@include css-vars($custom-checkbox-theme);
}
Demo
API References
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub