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/badge';
// 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/badge';
// 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 } from 'igniteui-angular/badge';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
// 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

    속성으로shape 배지 모양을 변경할 수 있습니다.square 기본적으로 배지 모양은 다음과rounded 같습니다.

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

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

    Badge Size

    배지의 크기는 변수를--size 사용하여 조절할 수 있습니다. 배지가 양방향으로 비례적으로 크기를 갖도록 해줍니다. 하지만 텍스트 값이 담긴 배지는 글꼴 크기와 줄 높이를 위해 타이포그래피 스타일을 사용caption 한다는 점을 기억하세요. 따라서 텍스트가 포함된 배지의 값을--size 16px 이하로 설정할 때는 타이포그래피도 수정해야 합니다.

    본보기:

    igx-badge {
  --size: 12px;

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

    Badge Icon

    재료 아이콘 외에도, 이 구성 요소는igx-badge​ ​재료 아이콘 확장(Material Icons Extended) 및 기타 모든 커스텀 아이콘 세트 사용도 지원합니다. 배지 구성 요소 내 재료 아이콘 확장 세트에서 아이콘을 추가하려면 먼저 등록해야 합니다:

    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

    이전 샘플을 확장하여 채팅 클라이언트와 유사한 연락처 목록을 만들어봅시다. 연락처 이름 외에도, 아바타와 연락처의 현재 상태(온라인, 오프라인, 오프라인)를 표시하고자 합니다. 이를 위해 우리는 andigx-badge 컴포넌트를 사용하고igx-avatar 있습니다. 컨테이너용으로는igx-list 사용됩니다.

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

    // app.module.ts

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

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

    ​igx-badge배지 모양을 설정할 수 있는 HASicon와type 입력 장치들. 공식 재질 아이콘 세트에서 이름을 입력해 아이콘을 설정할 수 있습니다. 배지 유형은 선택할 수default 있습니다.info​success​warning​error 유형에 따라 특정 배경색이 적용됩니다.

    우리 샘플에서는,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;
}

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

    스타일링

    Badge Theme Property Map

    속성을 변경하면$background-color 다음 종속 속성들이 자동으로 업데이트됩니다:

    기본 속성 종속 속성 설명
    $background색 $icon색 배지에 아이콘이 사용된 색상입니다.
    $text색 배지에 사용된 텍스트 색상입니다.

    배지 스타일링을 시작하려면, 모든 테마 기능과 컴포넌트 믹싱이 저장된 파일을 가져와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 하고 수용하는 새로운 테마를 만듭니다. 를$background-color 설정하면, 그리고$icon-color는$text-color 더 나은 대비를 제공하는 쪽에 따라 자동으로 할당됩니다—검정과 흰색. 이 속성은$border-radius 배지shape가 로square 설정되었을 때만 효과가 발생한다는 점에 유의하세요.

    $custom-badge-theme: badge-theme(
  $background-color: #57a5cd,
  $border-radius: 4px
);

    새로운 테마를 포함시키기 위해 믹싱을css-vars 사용합니다:

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

    Demo

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일badge 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-badge​dark-badge 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 부동산 목록은 배지 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-badge
class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]">
</igx-badge>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 배지는 다음과 같이 보여야 합니다:

    API References

    Theming Dependencies

    Additional Resources

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