Angular Avatar Component 개요

    Angular Avatar 구성 요소는 애플리케이션에 이니셜, 이미지 또는 머티리얼 아이콘을 추가하는 데 도움이 됩니다.

    Angular 아바타 예

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 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

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

    EXAMPLE
    TS
    HTML
    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

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

    App Builder | CTA 배너

    API 참조

    테마 종속성

    추가 리소스

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