Visão geral do componente do chip Angular

    The Angular Chip component é um elemento visual que exibe informações em um contêiner oval. O componente tem várias propriedades - ele pode ser modelado, excluído e selecionado. Vários chips podem ser reordenados e visualmente conectados uns aos outros, usando a área do chip como um contêiner.

    Angular Chip Example

    Getting Started with Ignite UI for Angular Chip

    Para começar a usar o componente Ignite UI for Angular Chip, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular
    

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxChipsModule no arquivo 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 {}
    

    Como alternativa, a partir da 16.0.0, você pode importar o IgxChipComponent como uma dependência autônoma ou usar o token IGX_CHIPS_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // 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' },
      ];
    }
    

    Agora que você importou o módulo Ignite UI for Angular Chips ou as diretivas, você pode começar a usar o componente igx-chip.

    Using the Angular Chip Component

    O IgxChipComponent tem uma propriedade de entrada id para que as diferentes instâncias de chip possam ser facilmente distinguidas. Se um id não for fornecido, ele será gerado automaticamente.

    <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
      {{chip.text}}
    </igx-chip>
    

    Escolha

    A seleção pode ser habilitada definindo a propriedade selectable input como true. Ao selecionar um chip, o evento selectedChanging é disparado. Ele fornece o novo valor selected para que você possa obter o novo estado e o evento original em originalEvent que acionou a alteração da seleção. Se isso não for feito por meio da interação do usuário, mas sim pela configuração da propriedade selected programaticamente, o argumento originalEvent terá um valor null.

    <igx-chip *ngFor="let chip of chipList" [selectable]="true">
      <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
      {{chip.text}}
    </igx-chip>
    

    Removing

    A remoção pode ser habilitada configurando a entrada removable como true. Quando habilitado, um botão remove é renderizado no final do chip. Ao remover um chip, o evento remove é emitido.

    Por padrão, o chip não é removido automaticamente da árvore DOM ao clicar no ícone remover. A remoção precisa ser feita 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

    O arrasto pode ser habilitado configurando a entrada draggable para true. Quando habilitado, você pode clicar e arrastar o chip ao redor.

    <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 os chips, você precisa manipular o evento usando o IgxChipsAreaComponent.

    Para criar o exemplo de demonstração, usaremos os recursos acima:

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

    Então, precisamos adicionar o chipList e a função que manipula o 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();
    }
    

    Se tudo correr bem, você deverá ver isto no seu navegador:

    Chip Templates

    Todos os elementos do IgxChipComponent são modeláveis.

    Você pode modelar o prefix e o suffix do chip usando as diretivas 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>
    

    Você pode personalizar o tamanho do chip, usando a variável CSS [--ig-size]. Por padrão, ele é definido como var(--ig-size-large). Ele também pode ser definido como var(--ig-size-medium) ou var(--ig-size-small), enquanto tudo dentro do chip retém seu posicionamento relativo:

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

    Você pode personalizar o select icon usando a entrada selectIcon. Ele aceita valores do tipo TemplateRef e substitui o ícone padrão, mantendo a mesma funcionalidade.

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

    Você pode personalizar o remove icon, usando a entrada removeIcon. Ele pega um valor do tipo TemplateRef e o renderiza em vez do ícone de remoção padrão.

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

    Demo

    Para criar o exemplo de demonstração abaixo, usaremos os recursos acima:

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

    Então, precisamos adicionar o chipList e a função que manipula o 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();
    }
    

    Se tudo correr bem, você deverá ver isto no seu navegador:

    Chip Area

    O IgxChipsAreaComponent é usado ao lidar com cenários mais complexos que exigem interação entre chips (arrastar, selecionar, navegar, etc.).

    Reorder Chips

    O chip pode ser arrastado pelo usuário final para alterar sua posição. O arrasto é desabilitado por padrão, mas pode ser habilitado usando a propriedade de entrada draggable. Você precisa lidar com a reordenação real do chip manualmente. É aqui que a área do chip é útil, pois fornece o evento reorder que retorna a nova ordem quando um chip é arrastado sobre outro 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

    O chip pode ser focado usando a tecla Tab ou clicando nele. Quando os chips estão em uma área de chip, eles podem ser reordenados usando a navegação do teclado:

    • Controles do teclado quando o chip está em foco:

      • ESQUERDA- Move o foco para o chip à esquerda.

      • DIREITA- Move o foco para o chip à direita.

      • ESPAÇO- Alterna a seleção de chip, se possível.

      • DELETE- Aciona o evento remove para o igxChip para que a exclusão do chip possa ser feita manualmente.

      • SHIFT + ESQUERDA- Aciona o evento reorder para igxChipArea quando o chip atualmente em foco deve mover a posição para a esquerda.

      • SHIFT + DIREITA- Aciona o evento reorder para igxChipArea quando o chip atualmente em foco deve se mover uma posição para a direita.

    • Controles do teclado quando o botão Remover está em foco:

      • ESPAÇO ou ENTER Dispara a saída remove para que a exclusão do chip possa ser feita manualmente.

    Aqui está um exemplo da área de chips usando IgxAvatar como prefixo e ícones personalizados para todos os 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>
    

    Redimensione o avatar para caber no chip:

    .chip-avatar-resized {
      width: 2em;
      height: 2em;
      min-width: 2em;
    }
    

    Adicione o chipList e as funções que manipulam os 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://pt-br.infragistics.com/angular-demos/assets/images/men/27.jpg'
        },
        {
            id: '423-676-2869',
            name: 'Richard Mahoney',
            photo: 'https://pt-br.infragistics.com/angular-demos/assets/images/men/13.jpg'
        },
        {
            id: '859-496-2817',
            name: 'Donna Price',
            photo: 'https://pt-br.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;
    }
    

    Se tudo estiver configurado corretamente, você deverá ver isto no seu navegador:

    Demo

    Estilização

    Para começar a estilizar o chip, 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';
    

    Seguindo a abordagem mais simples, criamos um novo tema que estende o chip-theme e aceita alguns parâmetros que estilizam os itens do 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,
    );
    

    O último passo é incluir o tema do componente em nosso aplicativo.

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

    Demo

    Custom sizing

    Você pode usar a variável--size, direcionando diretamente o igx-chip:

    igx-chip {
      --size: 50px;
    }
    

    Ou você pode usar a variável universal--igx-chip-size para atingir todas as instâncias:

    <div class="my-app">
      <igx-chip></igx-chip>
    </div>
    
    .my-app {
      --igx-chip-size: 50px;
    }
    

    Você também pode usar um dos tamanhos predefinidos, atribuindo-o à variável--ig-size. Os valores disponíveis para--ig-size são--ig-size-small,--ig-size-medium e--ig-size-large:

    igx-chip {
      --ig-size: var(--ig-size-small);
    }
    

    Saiba mais sobre isso no artigo Tamanho.

    API

    Theming Dependencies

    References

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.