Angular Avatar Component 개요
Angular Avatar 구성 요소는 애플리케이션에 이니셜, 이미지 또는 머티리얼 아이콘을 추가하는 데 도움이 됩니다.
Angular Avatar Example
Getting Started with Ignite UI for Angular Avatar
Ignite UI for Angular Avatar 구성 요소를 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 IgxAvatarModule 당신의 app.module.ts 파일.
// app.module.ts
...
import { IgxAvatarModule } from 'igniteui-angular';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxAvatarModule],
...
})
export class AppModule {}
또는 16.0.0부터 IgxAvatarComponent 독립형 종속성으로 가져올 수 있습니다.
// home.component.ts
...
import { IgxAvatarComponent } from 'igniteui-angular';
// import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-avatar shape="circle"></igx-avatar>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxAvatarComponent]
})
export class HomeComponent {}
이제 Ignite UI for Angular 아바타 모듈 또는 컴포넌트를 임포트했으니, 컴포넌트의 기본 환경설정부터 시작할 수 있습니다 igx-avatar.
Using the Angular Avatar Component
Ignite UI for Angular 아바타 구성 요소는 세 가지 모양(정사각형, 원형, 원형)과 세 가지 크기 옵션(소형, 중형, 대형)으로 제공됩니다. 이니셜, 이미지 또는 아이콘을 표시하는 데 사용할 수 있습니다.
Avatar Shape
값을 square, rounded 또는 circle로 설정하는 shape 속성을 통해 아바타 모양을 변경할 수 있습니다. 기본적으로 아바타의 모양은 square 입니다.
<igx-avatar shape="circle"></igx-avatar>
Avatar displaying initials
initials 포함된 간단한 아바타(예: 'Jack Sock'의 경우 JS)를 얻으려면 구성 요소 템플릿 내에 다음 코드를 추가하세요.
<igx-avatar initials="JS" shape="circle"></igx-avatar>
아바타를 원형으로 만들고 크기를 더 크게 만들어서 아바타를 강화해 보겠습니다.
<igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
또한 background 속성을 통해 배경을 변경할 수도 있고, color 속성을 통해 이니셜에 색상을 설정할 수도 있습니다.
// avatar.component.scss
igx-avatar {
background: #e41c77;
color: #000000;
}
Warning
igx-avatar 구성 요소의 roundShape 속성은 더 이상 사용되지 않습니다. 대신 shape 속성을 사용해야 합니다.
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
Avatar displaying image
이미지를 표시하는 아바타를 얻으려면 src 속성을 통해 이미지 소스를 설정하기만 하면 됩니다.
<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
shape="rounded"
size="large">
</igx-avatar>
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
Avatar displaying icon
유사하게 아바타는 icon 속성을 통해 아이콘을 표시할 수 있습니다. 현재 머티리얼 아이콘 세트의 모든 아이콘이 지원됩니다.
<igx-avatar icon="person"
shape="rounded"
size="small">
</igx-avatar>
다음과 같은 내용이 표시됩니다.
스타일링
아바타 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 확장하는 새 테마를 만듭니다. avatar-theme에 대한 값 제공 $background 그리고 $border-radius 매개 변수. 이 $color (또는 $icon-color)은 지정된 배경과 더 나은 대비를 제공하는 것에 따라 자동으로 검정 또는 흰색으로 설정됩니다. 참고로, $border-radius 속성은 아바타의 shape로 설정됩니다. rounded.
다음 마크업을 고려하면:
<div class="avatar-sample initials">
<igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar>
</div>
다음과 같은 아바타 테마를 만듭니다.
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$border-radius: 16px
);
마지막 단계는 사용자 정의 아바타 테마를 전달하는 것입니다.
.initials {
@include css-vars($custom-avatar-theme);
}
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
Custom sizing
변수를 사용하여--size 다음을 직접 타겟팅 할 수 있습니다. igx-avatar
igx-avatar {
--size: 200px;
}
또는 universal--igx-avatar-size 변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.
<div class="my-app">
<igx-avatar></igx-avatar>
</div>
.my-app {
--igx-avatar-size: 200px;
}
미리 정의된 크기 중 하나를 사용하여 size 속성이 적용되지 않은 경우 변수에--ig-size 할당할 수도 있습니다. 에--ig-size 사용할 수 있는 값은 다음과 같습니다--ig-size-small.--ig-size-large--ig-size-medium
igx-avatar {
--ig-size: var(--ig-size-small);
}
크기 문서에서 자세히 알아보세요.
API References
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub