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 {}

    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>

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

    스타일링

    Avatar Theme Property Map

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

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

    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);
}

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

    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

    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

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