Angular Avatar Component 개요
Angular Avatar 구성 요소는 애플리케이션에 이니셜, 이미지 또는 머티리얼 아이콘을 추가하는 데 도움이 됩니다.
Angular 아바타 예
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular 아바타 시작하기
Ignite UI for Angular Avatar 구성 요소를 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmd
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 {}
typescript
또는 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 {}
typescript
이제 Ignite UI for Angular 아바타 모듈 또는 컴포넌트를 임포트했으니, 컴포넌트의 기본 환경설정부터 시작할 수 있습니다 igx-avatar
.
Angular Avatar 컴포넌트 사용
Ignite UI for Angular 아바타 구성 요소는 세 가지 모양(정사각형, 원형, 원형)과 세 가지 크기 옵션(소형, 중형, 대형)으로 제공됩니다. 이니셜, 이미지 또는 아이콘을 표시하는 데 사용할 수 있습니다.
아바타 모양
값을 square
, rounded
또는 circle
로 설정하는 shape
속성을 통해 아바타 모양을 변경할 수 있습니다. 기본적으로 아바타의 모양은 square
입니다.
<igx-avatar shape="circle"></igx-avatar>
html
이니셜을 표시하는 아바타
initials
포함된 간단한 아바타(예: 'Jack Sock'의 경우 JS)를 얻으려면 구성 요소 템플릿 내에 다음 코드를 추가하세요.
<igx-avatar initials="JS" shape="circle"></igx-avatar>
html
아바타를 원형으로 만들고 크기를 더 크게 만들어서 아바타를 강화해 보겠습니다.
<igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
html
또한 background
속성을 통해 배경을 변경할 수도 있고, color
속성을 통해 이니셜에 색상을 설정할 수도 있습니다.
// avatar.component.scss
igx-avatar {
background: #e41c77;
color: #000000;
}
scss
igx-avatar
구성 요소의 roundShape
속성은 더 이상 사용되지 않습니다. 대신 shape
속성을 사용해야 합니다.
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
이미지를 표시하는 아바타
이미지를 표시하는 아바타를 얻으려면 src
속성을 통해 이미지 소스를 설정하기만 하면 됩니다.
<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
shape="rounded"
size="large">
</igx-avatar>
html
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
아바타 표시 아이콘
유사하게 아바타는 icon
속성을 통해 아이콘을 표시할 수 있습니다. 현재 머티리얼 아이콘 세트의 모든 아이콘이 지원됩니다.
<igx-avatar icon="person"
shape="rounded"
size="small">
</igx-avatar>
html
다음과 같은 내용이 표시됩니다.
스타일링
아바타 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 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
가장 간단한 접근 방식에 따라 avatar-theme
확장하고 $background
, $color
및 $border-radius
매개변수를 허용하는 새 테마를 만듭니다.
다음 마크업을 고려하면:
<div class="avatar-sample initials">
<igx-avatar initials="JS" size="medium"></igx-avatar>
</div>
html
다음과 같은 아바타 테마를 만듭니다.
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$color: #000000,
$border-radius: 16px
);
scss
마지막 단계는 사용자 정의 아바타 테마를 전달하는 것입니다.
.initials {
@include css-vars($custom-avatar-theme);
}
scss
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
사용자 지정 크기 조정
변수를 사용하여--size
다음을 직접 타겟팅 할 수 있습니다. igx-avatar
igx-avatar {
--size: 200px;
}
scss
또는 universal--igx-avatar-size
변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.
<div class="my-app">
<igx-avatar></igx-avatar>
</div>
html
.my-app {
--igx-avatar-size: 200px;
}
scss
미리 정의된 크기 중 하나를 사용하여 size 속성이 적용되지 않은 경우 변수에--ig-size
할당할 수도 있습니다. 에--ig-size
사용할 수 있는 값은 다음과 같습니다--ig-size-small
.--ig-size-large
--ig-size-medium
igx-avatar {
--ig-size: var(--ig-size-small);
}
scss
크기 문서에서 자세히 알아보세요.
API 참조
테마 종속성
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.