Descripción general de los componentes del chip Angular
The Angular Chip component
es un elemento visual que muestra información en un contenedor ovalado. El componente tiene varias propiedades: se puede crear una plantilla, eliminar y seleccionar. Se pueden reordenar varios chips y conectarlos visualmente entre sí, utilizando el área de chips como contenedor.
Angular Chip Example
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Getting Started with Ignite UI for Angular Chip
Para comenzar con el componente Ignite UI for Angular Chip, 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 a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxChipsModule en el archivo app.module.ts:
// app.module.ts
import { IgxChipsModule } from 'igniteui-angular';
// import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxChipsModule],
...
})
export class AppModule {}
typescript
Alternativamente, a partir de 16.0.0
, puede importar IgxChipComponent
como una dependencia independiente o usar el token IGX_CHIPS_DIRECTIVES
para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular';
import { NgFor } from '@angular/common';
// import { IGX_CHIPS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-chip *ngFor="let chip of chipList" [id]="chip.id">
{{ chip.text }}
</igx-chip>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_CHIPS_DIRECTIVES, NgFor],
})
export class HomeComponent {
public chipList = [
{ text: 'Country', id: '1', icon: 'place' },
{ text: 'City', id: '2', icon: 'location_city' },
{ text: 'Address', id: '3', icon: 'home' },
{ text: 'Street', id: '4', icon: 'streetview' },
];
}
typescript
Ahora que ha importado el módulo o las directivas Ignite UI for Angular Chips, puede comenzar a usar el componente igx-chip
.
Using the Angular Chip Component
IgxChipComponent
tiene una propiedad de entrada id
para que las diferentes instancias de chip se puedan distinguir fácilmente. Si no se proporciona una id
, se generará automáticamente.
<igx-chip *ngFor="let chip of chipList" [id]="chip.id">
{{chip.text}}
</igx-chip>
html
Selección
La selección se puede habilitar estableciendo la propiedad de entrada selectable
en true
. Al seleccionar un chip, se activa el evento selectedChanging
. Proporciona el nuevo valor selected
para que pueda obtener el nuevo estado y el evento original en originalEvent
que desencadenó el cambio de selección. Si esto no se hace mediante la interacción del usuario, sino estableciendo la propiedad selected
mediante programación, el argumento originalEvent
tiene un valor null
.
<igx-chip *ngFor="let chip of chipList" [selectable]="true">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
html
Removing
La eliminación se puede habilitar estableciendo la entrada removable
en true
. Cuando está habilitado, se muestra un botón de eliminación al final del chip. Al retirar un chip, se emite el evento remove
.
De forma predeterminada, el chip no se elimina automáticamente del árbol DOM al hacer clic en el icono de eliminación. La eliminación debe realizarse manualmente.
<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" (remove)="chipRemoved($event)">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
html
public chipRemoved(event: IBaseChipEventArgs) {
this.chipList = this.chipList.filter((item) => {
return item.id !== event.owner.id;
});
this.changeDetectionRef.detectChanges();
}
typescript
Dragging
El arrastre se puede habilitar configurando la entrada draggable
en true
. Cuando está habilitado, puede hacer clic y arrastrar el chip.
<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
html
Para reordenar los chips, necesita manejar el evento usando IgxChipsAreaComponent
.
Para crear la muestra de demostración, utilizaremos las funciones anteriores:
<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [selectable]="true" [removable]="true" (remove)="chipRemoved($event)">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
html
Luego, necesitamos agregar chipList
y la función que maneja el evento remove
:
import { IBaseChipEventArgs } from 'igniteui-angular';
// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
...
public chipList = [
{
text: 'Country',
id: '1',
icon: 'place'
},
{
text: 'City',
id: '2',
icon: 'location_city'
},
{
text: 'Town',
id: '3',
icon: 'store'
},
{
text: 'First Name',
id: '4',
icon: 'person_pin'
}
];
private changeDetectionRef: any;
public chipRemoved(event: IBaseChipEventArgs) {
this.chipList = this.chipList.filter((item) => {
return item.id !== event.owner.id;
});
this.changeDetectionRef.detectChanges();
}
ts
Si todo ha ido bien deberías ver esto en tu navegador:
Chip Templates
Todos los elementos de IgxChipComponent
son plantillas.
Puede crear una plantilla para el prefix
y el suffix
del chip, utilizando las directivas IgxPrefix
e IgxSuffix
:
<igx-chip>
<igx-icon igxPrefix>insert_emoticon</igx-icon>
<igx-icon igxSuffix style="transform: rotate(180deg)">insert_emoticon</igx-icon>
<span>Why not both?</span>
</igx-chip>
html
Puede personalizar el tamaño del chip utilizando la variable CSS [--ig-size
]. De forma predeterminada, está configurado en var(--ig-size-large)
. También se puede configurar en var(--ig-size-medium)
o var(--ig-size-small)
, mientras que todo dentro del chip conserva su posición relativa:
<igx-chip>Hi! My name is Chip!</igx-chip>
<igx-chip style="--ig-size: var(--ig-size-medium)">
I can be smaller!
</igx-chip>
<igx-chip style="--ig-size: var(--ig-size-small)">
<igx-icon igxPrefix>child_care</igx-icon>
Even tiny!
</igx-chip>
html
Puede personalizar el select icon
utilizando la entrada selectIcon
. Acepta valores de tipo TemplateRef
y anula el icono predeterminado manteniendo la misma funcionalidad.
<igx-chip *ngFor="let chip of chipList" [selectable]="true" [selectIcon]="mySelectIcon">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
<ng-template #mySelectIcon>
<igx-icon>check_circle</igx-icon>
</ng-template>
html
Puede personalizar el remove icon
utilizando la entrada removeIcon
. Toma un valor de tipo TemplateRef
y lo representa en lugar del icono de eliminación predeterminado.
<igx-chip *ngFor="let chip of chipList" [removable]="true" [removeIcon]="myRemoveIcon">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
<ng-template #myRemoveIcon>
<igx-icon>delete</igx-icon>
</ng-template>
html
Chip Area
El IgxChipsAreaComponent
se utiliza cuando se manejan escenarios más complejos que requieren interacción entre chips (arrastrar, seleccionar, navegar, etc.).
Reorder Chips
El usuario final puede arrastrar el chip para cambiar su posición. El arrastre está deshabilitado de forma predeterminada, pero se puede habilitar usando la propiedad de entrada draggable
. Debe manejar manualmente el reordenamiento de chips real. Aquí es donde el área del chip resulta útil, ya que proporciona el evento reorder
que devuelve el nuevo orden cuando un chip se arrastra sobre otro chip.
<igx-chips-area (reorder)="chipsOrderChanged($event)">
<igx-chip *ngFor="let chip of chipList" [draggable]="'true'">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
</igx-chips-area>
html
public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
const newChipList = [];
for (const chip of event.chipsArray) {
const chipItem = this.chipList.filter((item) => {
return item.id === chip.id;
})[0];
newChipList.push(chipItem);
}
this.chipList = newChipList;
}
typescript
Keyboard Navigation
El chip se puede enfocar usando la tecla Tab
o haciendo clic en él. Cuando los chips están en un área de chips, se pueden reordenar mediante la navegación con el teclado:
Controles del teclado cuando el chip está enfocado:
IZQUIERDA: mueve el foco al chip de la izquierda.
DERECHA: mueve el foco al chip de la derecha.
ESPACIO: alterna la selección de chip si es seleccionable.
ELIMINAR: activa el evento
remove
deligxChip
para que la eliminación del chip se pueda manejar manualmente.MAYÚS + IZQUIERDA: activa el evento
reorder
paraigxChipArea
cuando el chip actualmente enfocado debe moverse hacia la izquierda.MAYÚS + DERECHA: activa el evento
reorder
paraigxChipArea
cuando el chip actualmente enfocado debe moverse una posición hacia la derecha.
Controles del teclado cuando el botón Quitar está enfocado:
- ESPACIO o ENTRAR Activa la salida
remove
para que la eliminación del chip se pueda manejar manualmente.
- ESPACIO o ENTRAR Activa la salida
Aquí hay un ejemplo del área del chip usando IgxAvatar como prefijo e íconos personalizados para todos los chips:
<igx-chips-area (reorder)="chipsOrderChanged($event)">
<igx-chip
*ngFor="let chip of chipList"
[id]="chip.id"
[selectable]="true"
[selectIcon]="mySelectIcon"
[removable]="true"
[removeIcon]="myRemoveIcon"
(remove)="chipRemoved($event)"
[draggable]="'true'">
<igx-avatar
class="chip-avatar-resized"
igxPrefix
[src]="chip.photo"
shape="circle">
</igx-avatar>
{{chip.name}}
</igx-chip>
</igx-chips-area>
<ng-template #mySelectIcon>
<igx-icon>check_circle</igx-icon>
</ng-template>
<ng-template #myRemoveIcon>
<igx-icon>delete</igx-icon>
</ng-template>
html
Cambie el tamaño del avatar para que se ajuste al chip:
.chip-avatar-resized {
width: 2em;
height: 2em;
min-width: 2em;
}
scss
Agregue chipList
y las funciones que manejan los eventos:
import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from 'igniteui-angular';
// import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from '@infragistics/igniteui-angular'; for licensed package
...
public chipList = [
{
id: '770-504-2217',
name: 'Terrance Orta',
photo: 'https://es.infragistics.com/angular-demos/assets/images/men/27.jpg'
},
{
id: '423-676-2869',
name: 'Richard Mahoney',
photo: 'https://es.infragistics.com/angular-demos/assets/images/men/13.jpg'
},
{
id: '859-496-2817',
name: 'Donna Price',
photo: 'https://es.infragistics.com/angular-demos/assets/images/women/50.jpg'
}
];
private changeDetectionRef: any;
public chipRemoved(event: IBaseChipEventArgs) {
this.chipList = this.chipList.filter((item) => {
return item.id !== event.owner.id;
});
this.changeDetectionRef.detectChanges();
}
public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
const newChipList = [];
for (const chip of event.chipsArray) {
const chipItem = this.chipList.filter((item) => {
return item.id === chip.id;
})[0];
newChipList.push(chipItem);
}
this.chipList = newChipList;
}
ts
Si todo está configurado correctamente, deberías ver esto en tu navegador:
Demo
Estilismo
Para comenzar a diseñar el chip, 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
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el chip-theme
y acepta algunos parámetros que dan estilo a los elementos del chip:
$custom-theme: chip-theme(
$background: #011627,
$hover-background: #011627dc,
$focus-background: #0116276c,
$selected-background: #ecaa53,
$hover-selected-background: #ecaa53,
$focus-selected-background: #ecaa53,
$text-color: #fefefe,
$remove-icon-color: #f14545,
$remove-icon-color-focus: #da0000,
$border-radius: 5px,
);
scss
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($custom-theme);
scss
Demo
Custom sizing
Puede utilizar la variable, dirigiéndose directamente a la--size
igx-chip
variable :
igx-chip {
--size: 50px;
}
scss
O bien, puede utilizar la variable universal--igx-chip-size
para dirigirse a todas las instancias:
<div class="my-app">
<igx-chip></igx-chip>
</div>
html
.my-app {
--igx-chip-size: 50px;
}
scss
También puede utilizar uno de los tamaños predefinidos, asignándolo a la--ig-size
variable. Los valores disponibles para--ig-size
son--ig-size-small
,,--ig-size-medium
y--ig-size-large
:
igx-chip {
--ig-size: var(--ig-size-small);
}
scss
Obtén más información al respecto en el artículo Talla.