Angular Badge 구성 요소 개요

    Angular Badge는 시각적 알림이 필요할 때 아바타, 탐색 메뉴 또는 애플리케이션의 기타 구성 요소와 함께 사용되는 구성 요소입니다. 배지는 일반적으로 정보, 성공, 경고 또는 오류를 전달하기 위해 미리 정의된 스타일이 있는 아이콘으로 디자인됩니다.

    Angular Badge Example

    Getting Started with Ignite UI for Angular Badge

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

    ng add igniteui-angular

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

    다음 단계는 IgxBadgeModule 당신의 app.module.ts 파일.

    // app.module.ts

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

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

    또는 16.0.0부터 IgxBadgeComponent 독립형 종속성으로 가져올 수 있습니다.

    // home.component.ts

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

@Component({
    selector: 'app-home',
    template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxBadgeComponent]
})
export class HomeComponent {}

    이제 Ignite UI for Angular 가져왔으므로 igx-badge 구성 요소의 기본 구성으로 시작할 수 있습니다.

    Using the Angular Badge Component

    데모 샘플이 어떻게 수행되는지 살펴보겠습니다. 아바타에 있는 간단한 성공 배지입니다. 이를 빌드하려면 IgxAvatarModule과 함께 IgxBadgeModule을 가져와야 합니다.

    // app.module.ts
...
import { IgxBadgeModule, IgxAvatarModule } from 'igniteui-angular';
// import {  IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  ...
  imports: [..., IgxBadgeModule, IgxAvatarModule],
  ...
})

export class AppModule {}

    또는 16.0.0부터 IgxBadgeComponent 및 IgxAvatarComponent 독립형 종속성으로 가져올 수 있습니다.

    다음으로 해당 구성요소를 템플릿에 추가하겠습니다.

    <div class="wrapper">
    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
    <igx-badge icon="check" type="success"></igx-badge>
</div>

    래퍼를 사용하여 아바타의 일부를 덮으면서 배지를 절대적으로 배치합니다.

    .wrapper {
  position: relative;
  margin-top: 15px;
}

igx-badge {
  position: absolute;
  bottom: 0;
  left: 28px;
}

    Badge Shape

    값을 square로 설정하는 shape 속성을 통해 배지 모양을 변경할 수 있습니다. 기본적으로 배지 모양은 rounded 모양입니다.

    <igx-badge icon="check" type="success" shape="square"></igx-badge>

    모든 작업이 올바르게 완료되면 위에 표시된 데모 샘플이 브라우저에 표시됩니다.

    Badge Size

    배지의 크기는 변수를 사용하여 제어할 수 있습니다--size. 배지의 크기가 양방향으로 비례적으로 조정되도록 합니다. 그러나 텍스트 값을 포함하는 배지는 font-size 및 line-height에 대해 타이포그래피 스타일을 사용 caption 한다는 점을 명심하십시오. 이러한 이유로 텍스트가 포함된 배지를--size 16px 미만의 값으로 설정할 때 해당 타이포그래피도 수정해야 합니다.

    본보기:

    igx-badge {
  --size: 12px;

  font-size: calc(var(--size) / 2);
  line-height: normal;
}

    Badge Icon

    머티리얼 아이콘 외에도 igx-badge 구성 요소는 머티리얼 아이콘 확장 및 기타 사용자 정의 아이콘 세트의 사용도 지원합니다. 배지 구성요소 내부의 머티리얼 아이콘 확장 세트에서 아이콘을 추가하려면 먼저 등록해야 합니다.

    export class BadgeIconComponent implements OnInit { 
    constructor (protected _iconService: IgxIconService) {}

    public ngOnInit() {
        this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
    }
}

    그런 다음 다음과 같이 아이콘 이름과 계열을 지정하십시오.

    <igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>

    Badge in List

    이전 샘플을 확장하여 채팅 클라이언트의 연락처와 유사한 연락처 목록을 만들어 보겠습니다. 연락처 이름 외에도 아바타와 연락처의 현재 상태(온라인, 오프라인 또는 부재중)를 표시하려고 합니다. 이를 달성하기 위해 우리는 igx-badge 및 igx-avatar 구성 요소를 사용하고 있습니다. 컨테이너의 경우 igx-list 사용됩니다.

    계속하려면 필요한 모든 모듈을 포함하고 app.module.ts 파일로 가져오세요.

    // app.module.ts

...
import {
    IgxListModule,
    IgxAvatarModule,
    IgxBadgeModule
} from 'igniteui-angular';
// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
})
export class AppModule {}
    Note

    ​igx-badge 배지 모양을 구성하기 위한 icon 및 type 입력이 있습니다. 공식 자료 아이콘 세트에서 이름을 제공하여 아이콘을 설정할 수 있습니다. 배지 유형은 default, info, success, warning 또는 error로 설정할 수 있습니다. 종류에 따라 특정 배경색이 적용됩니다.

    샘플에서 icon 및 type​ ​icon 및 type 이라는 모델 속성에 바인딩됩니다.

    다음으로 템플릿에 연락처를 추가합니다.

    <!-- contacts.component.html -->

<igx-list>
  <igx-list-item isHeader="true">
    Team Members (4)
  </igx-list-item>
  <igx-list-item *ngFor="let member of members">
    <div class="wrapper">
      <div>
        <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
      </div>
      <div class="contact-container">
        <span class="contact-name">{{ member.name }}</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>

    다음과 같이 TypeScript 파일에 멤버를 생성하겠습니다.

    // contacts.component.ts

...
 public members: Member[] = [
    new Member('Terrance Orta', 'online'),
    new Member('Donna Price', 'online'),
    new Member('Lisa Landers', 'away'),
    new Member('Dorothy H. Spencer', 'offline'),
  ];


    
...
class Member {
    public name: string;
    public status: string;
    public type: string;
    public icon: string;

    constructor(name: string, status: string) {
        this.name = name;
        this.status = status;
        switch (status) {
            case 'online':
                this.type = 'success';
                this.icon = 'check';
                break;
            case 'away':
                this.type = 'warning';
                this.icon = 'schedule';
                break;
            case 'offline':
                this.type = 'error';
                this.icon = 'remove';
                break;
        }
    }
}

    상위 컨테이너에 배지를 배치합니다.

    /* contacts.component.css */

.wrapper {
    display: flex;
    flex-direction: row;
}

.contact-name {
    font-weight: 600;
}

.contact-container {
    margin-left: 20px;
}

.badge-style {
  position: absolute;
  bottom: 2.5px;
  left: 40px;
}

    샘플이 올바르게 구성되면 구성원 목록이 표시되어야 하며 모든 구성원에는 현재 상태를 보여주는 아바타와 배지가 있습니다.

    스타일링

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

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

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

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

    $custom-badge-theme: badge-theme(
    $border-color: white,
    $border-width: 1px,
    $icon-color: white,
    $text-color: black,
    $shadow: 3px 2px 5px 0px rgba(0,0,0,0.4)
);

    Including Themes

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

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

     @include badge($custom-badge-theme);
    Note

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

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

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

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

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

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

    위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.

    Demo

    API References

    Theming Dependencies

    Additional Resources

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