Angular 아바타 구성 요소 개요
Angular Avatar 구성 요소는 애플리케이션에 이니셜, 이미지 또는 재질 아이콘을 추가하는 데 도움이 됩니다.
Angular Avatar Example
Getting Started with Ignite UI for Angular Avatar
Ignite UI for Angular 아바타 구성 요소를 시작하려면 먼저 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, $color 및 $border-radius 매개변수를 허용하는 새 테마를 만듭니다.
다음 마크업을 고려하면:
<div class="initials-avatar">
<igx-avatar>BA</igx-avatar>
</div>
테마를 만들어야 합니다.
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$color: #000000,
$border-radius: 16px
);
Using CSS variables
마지막 단계는 사용자 정의 아바타 테마를 전달하는 것입니다.
.initials-avatar {
@include css-vars($custom-avatar-theme);
}
Using mixins
Internet Explorer 11 및 이전 브라우저의 구성 요소 스타일을 지정하려면 CSS 변수를 지원하지 않으므로 다른 접근 방식을 사용해야 합니다.
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 반면에 사용자 정의 테마가 다른 구성요소로 누출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.
:host {
::ng-deep {
// Pass the custom avatar theme to the `igx-avatar` mixin
.initials-avatar {
@include avatar($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