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/avatar';
// 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/avatar';
// 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 Avatar 모듈이나 컴포넌트를 가져왔으니, 컴포넌트의igx-avatar 기본 구성을 시작할 수 있습니다.

    Using the Angular Avatar Component

    Ignite UI for Angular 아바타 구성 요소는 세 가지 모양(정사각형, 원형, 원형)과 세 가지 크기 옵션(소형, 중형, 대형)으로 제공됩니다. 이니셜, 이미지 또는 아이콘을 표시하는 데 사용할 수 있습니다.

    Avatar Shape

    속성의shape 값을square 설정하여 아바타 모양을 변경할 수 있습니다.rounded​circle 기본적으로 아바타의 형태는 그것입니다square.

    <igx-avatar shape="circle"></igx-avatar>

    Avatar displaying initials

    간단한 아바타initials (i.e. JS 'Jack Sock'의 의미)를 얻으려면, 컴포넌트 템플릿 안에 다음 코드를 추가하세요:

    <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

    컴포넌트의roundShape 속성은igx-avatar 폐지되었습니다. 대신 속성(attribute)을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>

    다음과 같은 내용이 표시됩니다.

    스타일링

    Avatar Theme Property Map

    속성을 변경하면$background 다음 종속 속성들이 자동으로 업데이트됩니다:

    기본 속성 종속 속성 설명
    $background $color 아바타에 사용된 텍스트 색상.
    $icon색 아바타에 사용된 아이콘 색상.

    아바타 스타일링을 시작하려면, 모든 테마 기능과 컴포넌트 믹스인이 있는 파일을 가져와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);
}

    모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일avatar 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-avatar​dark-avatar 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 부동산 목록은 아바타 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-avatar
class="!light-avatar ![--background:#FF4E00]"
initials="DY"
shape="rounded">
</igx-avatar>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 당신의 아바타는 다음과 같이 보여야 합니다:

    Custom sizing

    변수를--size 사용하여 직접 다음을 타겟팅igx-avatar 할 수 있습니다:

    igx-avatar {
  --size: 200px;
}

    또는 모든 인스턴스를 타겟팅하는 유버설--igx-avatar-size 변수를 사용할 수도 있습니다:

    <div class="my-app">
  <igx-avatar></igx-avatar>
</div>

    .my-app {
  --igx-avatar-size: 200px;
}

    크기 속성이 적용되지 않는다면 미리 정의된 크기 중 하나를 변수에--ig-size 할당하는 것도 가능합니다. 에 대한 사용 가능한 값--ig-size은 다음과 같습니다--ig-size-small:--ig-size-medium​--ig-size-large​

    igx-avatar {
  --ig-size: var(--ig-size-small);
}

    ​크기 문서에서 자세히 알아보세요.

    API References

    Theming Dependencies

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.