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에 대한 전체 소개는 시작 항목을 참조하십시오.
The next step is to import the IgxAvatarModule in your app.module.ts file.
// app.module.ts
...
import { IgxAvatarModule } from 'igniteui-angular';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxAvatarModule],
...
})
export class AppModule {}
Alternatively, as of 16.0.0 you can import the IgxAvatarComponent as a standalone dependency.
// 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 {}
Now that you have the Ignite UI for Angular Avatar module or component imported, you can start with a basic configuration of the igx-avatar component.
Using the Angular Avatar Component
Ignite UI for Angular 아바타 구성 요소는 세 가지 모양(정사각형, 원형, 원형)과 세 가지 크기 옵션(소형, 중형, 대형)으로 제공됩니다. 이니셜, 이미지 또는 아이콘을 표시하는 데 사용할 수 있습니다.
Avatar Shape
We can change the avatar shape through the shape attribute setting its value to square, rounded or circle. By default, the shape of the avatar is square.
<igx-avatar shape="circle"></igx-avatar>
Avatar displaying initials
To get a simple avatar with initials (i.e. JS for 'Jack Sock'), add the following code inside the component template:
<igx-avatar initials="JS" shape="circle"></igx-avatar>
아바타를 원형으로 만들고 크기를 더 크게 만들어서 아바타를 강화해 보겠습니다.
<igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
We can also change the background through the background property or set a color on the initials through the color property.
// avatar.component.scss
igx-avatar {
background: #e41c77;
color: #000000;
}
Warning
The roundShape property of the igx-avatar component have been deprecated. The shape attribute should be used instead.
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
Avatar displaying image
To get an avatar that displays an image, all you have to do is set the image source via the src property.
<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
shape="rounded"
size="large">
</igx-avatar>
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
Avatar displaying icon
Analogically, the avatar can display an icon via the icon property. Currently all icons from the material icon set are supported.
<igx-avatar icon="person"
shape="rounded"
size="small">
</igx-avatar>
다음과 같은 내용이 표시됩니다.
스타일링
To get started with styling the avatar, we need to import the index file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the avatar-theme providing values for the $background and $border-radius parameters. The $color (or $icon-color) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the $border-radius property only takes effect when the avatar's shape is set to 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
You can either use the --size variable, targeting the igx-avatar directly:
igx-avatar {
--size: 200px;
}
Or you can use the universal --igx-avatar-size variable to target all instances:
<div class="my-app">
<igx-avatar></igx-avatar>
</div>
.my-app {
--igx-avatar-size: 200px;
}
You can also use one of the predefined sizes, assigning it to the --ig-size variable, if theres no size attribute applied. The available values for --ig-size are --ig-size-small, --ig-size-medium, and --ig-size-large:
igx-avatar {
--ig-size: var(--ig-size-small);
}
크기 문서에서 자세히 알아보세요.
API References
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub