Angular Badge 구성 요소 개요
Angular Badge는 시각적 알림이 필요할 때 애플리케이션에서 아바타, 탐색 메뉴 또는 기타 구성 요소와 함께 사용되는 구성 요소입니다. 배지는 일반적으로 정보, 성공, 경고 또는 오류를 전달하기 위해 미리 정의된 스타일의 아이콘으로 디자인됩니다.
Angular 배지 예시
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular Badge 시작하기
Ignite UI for Angular Badge 구성 요소를 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmdIgnite 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 {}
typescript또는 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 {}
typescript이제 Ignite UI for Angular Badge 모듈 또는 구성 요소를 가져왔으므로 구성 요소의 기본 구성부터 시작할 수 있습니다 igx-badge.
Angular Badge 구성 요소 사용
데모 샘플이 어떻게 수행되는지 살펴보겠습니다. 아바타에 있는 간단한 성공 배지입니다. 이를 빌드하려면 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 {}
typescript또는 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>
html래퍼를 사용하여 아바타의 일부를 덮으면서 배지를 절대적으로 배치합니다.
.wrapper {
position: relative;
margin-top: 15px;
}
igx-badge {
position: absolute;
bottom: 0;
left: 28px;
}
scss배지 모양
값을 square로 설정하는 shape 속성을 통해 배지 모양을 변경할 수 있습니다. 기본적으로 배지 모양은 rounded 모양입니다.
<igx-badge icon="check" type="success" shape="square"></igx-badge>
html모든 작업이 올바르게 완료되면 위에 표시된 데모 샘플이 브라우저에 표시됩니다.
배지 크기
배지의 크기는 변수를 사용하여 제어할 수 있습니다--size. 배지의 크기가 양방향으로 비례적으로 조정되도록 합니다. 그러나 텍스트 값을 포함하는 배지는 font-size 및 line-height에 대해 타이포그래피 스타일을 사용 caption 한다는 점을 명심하십시오. 이러한 이유로 텍스트가 포함된 배지를--size 16px 미만의 값으로 설정할 때 해당 타이포그래피도 수정해야 합니다.
본보기:
igx-badge {
--size: 12px;
font-size: calc(var(--size) / 2);
line-height: normal;
}
scss배지 아이콘
머티리얼 아이콘 외에도 igx-badge 구성 요소는 머티리얼 아이콘 확장 및 기타 사용자 정의 아이콘 세트의 사용도 지원합니다. 배지 구성요소 내부의 머티리얼 아이콘 확장 세트에서 아이콘을 추가하려면 먼저 등록해야 합니다.
export class BadgeIconComponent implements OnInit {
constructor (protected _iconService: IgxIconService) {}
public ngOnInit() {
this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
}
}
ts그런 다음 다음과 같이 아이콘 이름과 계열을 지정하십시오.
<igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>
html목록의 배지
이전 샘플을 확장하여 채팅 클라이언트의 연락처와 유사한 연락처 목록을 만들어 보겠습니다. 연락처 이름 외에도 아바타와 연락처의 현재 상태(온라인, 오프라인 또는 부재중)를 표시하려고 합니다. 이를 달성하기 위해 우리는 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 {}
typescriptigx-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>
html다음과 같이 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'),
];
typescript
...
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;
}
}
}
typescript상위 컨테이너에 배지를 배치합니다.
/* 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;
}
css샘플이 올바르게 구성되면 구성원 목록이 표시되어야 하며 모든 구성원에는 현재 상태를 보여주는 아바타와 배지가 있습니다.
스타일링
배지 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss가장 간단한 접근 방식에 따라 배지 항목의 스타일을 지정하는 일부 매개 변수를 확장하고 badge-theme 허용하는 새 테마를 만듭니다. 를 $background-color $icon-color 설정하면 흑백 중 어느 것이 더 나은 대비를 제공하는지에 따라 and $text-color가 자동으로 할당됩니다. 이 $border-radius 속성은 배지 shape가 로 square 설정된 경우에만 적용됩니다.
$custom-badge-theme: badge-theme(
$background-color: #57a5cd,
$border-radius: 4px
);
scss새 테마를 포함하려면 mixin을 사용합니다. css-vars
@include css-vars($custom-badge-theme);
scss데모
API 참조
테마 종속성
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub