Descripción general de los componentes del chip Angular
[The Angular Chip component](https://es.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) is a visual element that displays information in an oval container. The component has various properties - it can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other, using the chip area as a container.
Angular Chip Example
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
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 {}
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' }
];
}
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>
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>
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>
public chipRemoved(event: IBaseChipEventArgs) {
this.chipList = this.chipList.filter((item) => {
return item.id !== event.owner.id;
});
this.changeDetectionRef.detectChanges();
}
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>
Note
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>
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();
}
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>
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>
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>
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>
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>
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;
}
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>
Cambie el tamaño del avatar para que se ajuste al chip:
.chip-avatar-resized {
width: 2em;
height: 2em;
min-width: 2em;
}
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;
}
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';
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
);
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 chip($custom-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated
, es necesario penetrate
esta encapsulación usando::ng-deep
:host {
::ng-deep {
@include chip($custom-theme);
}
}
Si $legacy-support
está configurado en false
(predeterminado), incluya las variables CSS del componente así:
@include css-vars($custom-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-theme);
}
Demo
Custom sizing
Puede utilizar la variable, dirigiéndose directamente a la--size
igx-chip
variable :
igx-chip {
--size: 50px;
}
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>
.my-app {
--igx-chip-size: 50px;
}
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);
}
Obtén más información al respecto en el artículo Talla.
Known Issues and Limitations
El uso del componente Chips Area en IE11 requiere la importación explícita de la matriz polyfill en polyfill.ts de la aplicación angular.
import 'core-js/es7/array';