Visão geral do componente Angular Checkbox
Angular Checkbox é uma extensão do checkbox do tipo de entrada HTML padrão, fornecendo funcionalidade similar, apenas aprimorada com coisas como animações e estilo Material Design. Ele permite que os usuários escolham uma ou várias opções predefinidas, principalmente em formulários e pesquisas.
O componente Ignite UI for Angular Checkbox é um controle de seleção que permite que os usuários façam uma escolha binária para uma determinada condição. Ele se comporta de forma semelhante à caixa de seleção do navegador nativo. Alguns dos recursos que ele oferece são opções de estilo, temas, estados marcados, desmarcados e indeterminados, entre outros.
Angular Checkbox Example
Veja a caixa de seleção em ação no exemplo de caixa de seleção Angular abaixo.
Getting Started with Ignite UI for Angular Checkbox
Para começar a usar o componente Ignite UI for Angular Checkbox, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:
ng add igniteui-angularPara obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.
O próximo passo é importar o IgxCheckboxModule no arquivo 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 {}
Como alternativa, a partir da 16.0.0 você pode importar o IgxCheckboxComponent como uma dependência autônoma.
// 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 {}
Agora que você importou o módulo ou componente Ignite UI for Angular Checkbox, você pode começar a usar o componente igx-checkbox.
Using the Angular Checkbox Component
Para criar a caixa de seleção na demonstração, adicione o seguinte código dentro do modelo do componente:
<igx-checkbox [checked]="true">
Simple checkbox
</igx-checkbox>
Checkbox properties
Vamos aprimorar o código acima vinculando as propriedades da caixa de seleção a alguns dados. Digamos que temos uma matriz de objetos de tarefa, cada um com duas propriedades: description e done. Você pode vincular a propriedade checked do componente da caixa de seleção à propriedade done do objeto de tarefa subjacente. Analogicamente, você pode vincular a propriedade value à description. Opcionalmente, você também pode vincular o evento change e adicionar alguma lógica personalizada no método do manipulador de eventos fornecido.
// 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
}
}
Melhore o modelo de componente adicionando uma caixa de seleção para cada tarefa e, em seguida, definindo as vinculações de propriedade correspondentes:
<!--tasks.component.html-->
<igx-checkbox *ngFor="let task of tasks" [checked]="task.done">
{{ task.description }}
</igx-checkbox>
Adicione alguns estilos:
//task.component.scss
:host {
display: flex;
flex-flow: column nowrap;
padding: 16px;
}
igx-checkbox {
margin-top: 16px;
}
O resultado final seria algo assim:
Label Positioning
Você pode posicionar o rótulo usando a propriedade labelPosition da caixa de seleção:
<igx-checkbox labelPosition="before"></igx-checkbox>
Se labelPosition não estiver definido, o rótulo será posicionado após a caixa de seleção.
Indeterminate Checkbox in Angular
Além dos estados marcado e desmarcado, há um terceiro estado em que uma caixa de seleção pode estar: indeterminate. Nesse estado, a caixa de seleção não é marcada nem desmarcada. Isso é definido usando a propriedade indeterminate da caixa de seleção:
<igx-checkbox [indeterminate]="true"></igx-checkbox>
Podemos criar um aplicativo que tenha uma lista de tarefas que precisam ser feitas e uma caixa de seleção mestre no Angular que será marcada somente se todas as tarefas forem concluídas. Vamos atualizar o exemplo anterior. Começando com o modelo:
<!-- 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>
Em seguida, vamos recuar as subtarefas para que fique mais visual que elas fazem parte do mesmo grupo.
// app.component.scss
:host {
display: flex;
flex-flow: column nowrap;
padding: 16px;
}
igx-checkbox {
margin-top: 16px;
}
igx-checkbox.tasks {
padding-left: 10px;
}
E por fim, criaremos a lógica da nossa aplicação:
// 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;
}
}
}
Depois de tudo isso feito, nossa aplicação deverá ficar assim:
Estilização
Para começar a estilizar a caixa de seleção, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Em seguida, criamos um novo tema que estende o checkbox-theme e usamos alguns de seus parâmetros para estilizar os itens do checkbox:
// in styles.scss
$custom-checkbox-theme: checkbox-theme(
$border-radius: 10px,
$label-color: #011627,
$empty-color: #ECAA53,
$fill-color: #ECAA53,
$tick-color: #011627,
);
O último passo é incluir o tema do componente em nosso aplicativo.
@include css-vars($custom-checkbox-theme);
Demo
Referências de API
Theming Dependencies
Recursos adicionais
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub