Angular 칩 구성 요소 개요

    [The Angular Chip component](https://ko.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

    Ignite UI for Angular Chip 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular

    Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    다음 단계는 app.module.ts 파일에서 IgxChipsModule을 가져오는 것입니다.

    // app.module.ts

import { IgxChipsModule } from 'igniteui-angular';
// import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxChipsModule],
    ...
})
export class AppModule {}

    또는 16.0.0부터 IgxChipComponent 독립 실행형 종속성으로 가져오거나 IGX_CHIPS_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.

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

    이제 Ignite UI for Angular 가져왔으므로 igx-chip 구성 요소 사용을 시작할 수 있습니다.

    Using the Angular Chip Component

    ​IgxChipComponent 에는 다양한 칩 인스턴스를 쉽게 구별할 수 있도록 id 입력 속성이 있습니다. id 제공되지 않으면 자동으로 생성됩니다.

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

    선택

    ​selectable 입력 속성을 true로 설정하여 선택을 활성화할 수 있습니다. 칩을 선택하면 selectedChanging 이벤트가 시작됩니다. 새로운 selected 값을 제공하므로 선택 변경을 트리거한 originalEvent에서 새로운 상태와 원래 이벤트를 얻을 수 있습니다. 이 작업이 사용자 상호 작용을 통해 수행되지 않고 대신 프로그래밍 방식으로 selected 속성을 설정하여 수행되는 경우 originalEvent 인수의 값은 null 입니다.

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

    Removing

    ​removable 입력을 true로 설정하여 제거를 활성화할 수 있습니다. 활성화되면 칩 끝에 제거 버튼이 렌더링됩니다. 칩을 제거하면 remove 이벤트가 발생합니다.

    기본적으로 제거 아이콘을 클릭해도 칩은 DOM 트리에서 자동으로 제거되지 않습니다. 제거는 수동으로 처리해야 합니다.

    <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

    ​draggable 입력을 true로 설정하면 드래그를 활성화할 수 있습니다. 활성화되면 칩을 클릭하고 드래그할 수 있습니다.

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

    칩을 재정렬하려면 IgxChipsAreaComponent 사용하여 이벤트를 처리해야 합니다.

    데모 샘플을 만들기 위해 위의 기능을 사용합니다.

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

    그런 다음 chipList 그리고 이를 처리하는 함수는 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();
}

    모든 것이 제대로 진행되었다면 브라우저에 다음과 같은 내용이 표시됩니다.

    Chip Templates

    ​IgxChipComponent의 모든 요소는 템플릿화 가능합니다.

    ​prefix 및 IgxSuffix 지시어를 사용하여 칩의 IgxPrefix와 suffix 템플릿화할 수 있습니다.

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

    [--ig-size] CSS 변수를 사용하여 칩 크기를 맞춤설정할 수 있습니다. 기본적으로 var(--ig-size-large)로 설정됩니다. var(--ig-size-medium) 또는 var(--ig-size-small)으로 설정할 수도 있으며, 칩 내부의 모든 항목은 상대적 위치를 유지합니다.

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

    당신은 select icon, 사용하여 selectIcon 입력. 유형의 값을 허용합니다. TemplateRef 동일한 기능을 유지하면서 기본 아이콘을 재정의합니다.

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

    당신은 remove icon, 사용하여 removeIcon 입력. 유형의 값을 취합니다. TemplateRef 기본 제거 아이콘 대신 렌더링합니다.

    <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

    ​IgxChipsAreaComponent는 칩 간의 상호 작용(끌기, 선택, 탐색 등)이 필요한 보다 복잡한 시나리오를 처리할 때 사용됩니다.

    Reorder Chips

    위치를 변경하기 위해 최종 사용자가 칩을 끌 수 있습니다. 드래그는 기본적으로 비활성화되어 있지만 draggable 입력 속성을 사용하여 활성화할 수 있습니다. 실제 칩 재정렬은 수동으로 처리해야 합니다. 칩이 다른 칩 위로 드래그될 때 새 주문을 반환하는 reorder 이벤트를 제공하므로 칩 영역이 유용한 곳입니다.

    <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

    ​Tab 키를 사용하거나 클릭하여 칩에 초점을 맞출 수 있습니다. 칩이 칩 영역에 있으면 키보드 탐색을 사용하여 재정렬할 수 있습니다.

    • 칩에 초점이 맞춰졌을 때 키보드 제어:

      • LEFT- 포커스를 왼쪽 칩으로 이동합니다.

      • RIGHT- 포커스를 오른쪽 칩으로 이동합니다.

      • SPACE- 선택 가능한 경우 칩 선택을 토글합니다.

      • DELETE- 칩 삭제를 수동으로 처리할 수 있도록 igxChip에 대한 remove 이벤트를 트리거합니다.

      • SHIFT + LEFT- 현재 초점을 맞춘 칩이 위치를 왼쪽으로 이동해야 할 때 igxChipArea에 대한 reorder 이벤트를 트리거합니다.

      • SHIFT + RIGHT- 현재 초점이 맞춰진 칩이 오른쪽으로 한 위치 이동해야 할 때 igxChipArea에 대한 reorder 이벤트를 트리거합니다.

    • 제거 버튼에 포커스가 있을 때 키보드 컨트롤:

      • SPACE 또는 ENTER 칩 삭제를 수동으로 처리할 수 있도록 remove 출력을 실행합니다.

    다음은 IgxAvatar를 모든 칩의 접두사 및 사용자 정의 아이콘으로 사용하는 칩 영역의 예입니다.

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

    칩에 맞게 아바타 크기를 조정합니다.

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

    이벤트를 처리하는 chipList 및 함수를 추가합니다.

    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://ko.infragistics.com/angular-demos/assets/images/men/27.jpg'
    },
    {
        id: '423-676-2869',
        name: 'Richard Mahoney',
        photo: 'https://ko.infragistics.com/angular-demos/assets/images/men/13.jpg'
    },
    {
        id: '859-496-2817',
        name: 'Donna Price',
        photo: 'https://ko.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;
}

    모든 것이 올바르게 설정되면 브라우저에 다음이 표시됩니다.

    Demo

    스타일링

    칩 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    가장 간단한 접근 방식에 따라 chip-theme 확장하고 칩 항목의 스타일을 지정하는 일부 매개 변수를 허용하는 새로운 테마를 만듭니다.

    $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

    마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

    ​$legacy-support​ ​true로 설정된 경우 다음과 같은 구성 요소 테마를 포함합니다.

     @include chip($custom-theme);
    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

    :host {
     ::ng-deep {
        @include chip($custom-theme);
    }
}

    ​$legacy-support​ ​false (기본값)로 설정된 경우 다음과 같은 구성 요소 CSS 변수를 포함합니다.

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

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 변수를 재정의하려면 전역 선택기가 필요하므로 여전히:host 사용해야 합니다.

    :host {
    @include css-vars($custom-theme);
}

    Demo

    Custom sizing

    변수를 사용하여--size 다음을 직접 타겟팅 할 수 있습니다. igx-chip​

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

    또는 universal--igx-chip-size 변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.

    <div class="my-app">
  <igx-chip></igx-chip>
</div>

    .my-app {
  --igx-chip-size: 50px;
}

    미리 정의된 크기 중 하나를 사용하여 변수에 할당할 수도 있습니다--ig-size. 에--ig-size 사용할 수 있는 값은 다음과 같습니다--ig-size-small.--ig-size-large​--ig-size-medium​

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

    ​크기 문서에서 자세히 알아보세요.

    Known Issues and Limitations

    • IE11에서 Chips Area 구성 요소를 사용하려면 각도 애플리케이션의 polyfill.ts에서 배열 폴리필을 명시적으로 가져와야 합니다.

      import 'core-js/es7/array';

    API

    Theming Dependencies

    References

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.