Web Components 아바타

    Ignite UI for Web Components 아바타는 응용 프로그램에 이니셜, 이미지 또는 아이콘을 표시하는 데 도움이 됩니다.

    Web Components Icon Avatar Example

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for Web Components npm 패키지를 설치해야 합니다.

    npm install igniteui-webcomponents

    import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent);

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    ​IgcAvatarComponent는 이미지, 이니셜 또는 아이콘을 포함한 기타 콘텐츠를 표시할 수 있습니다. IgcAvatarComponent 선언은 다음과 같이 간단합니다.

    <igc-avatar></igc-avatar>

    아바타에는 상황에 따라 다양한 콘텐츠를 렌더링할 수 있는 여러 속성이 있습니다. 아바타의 경계에 콘텐츠를 표시하는 가장 기본적인 방법은 여는 태그와 닫는 태그 사이에 콘텐츠를 제공하는 것입니다.

    <igc-avatar>
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Initials

    속성이 initials 설정되면 아바타의 모든 자식 요소가 무시되고 이 속성에 전달된 문자열이 표시됩니다.

    <!-- Initials("AZ") will be displayed instead of the icon. -->

<igc-avatar initials="AZ">
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Image

    아바타는 속성에 src 정적 자산에 대한 유효한 URL이 할당된 경우에도 이미지를 표시할 수 있습니다. 이 경우 initials 값은 무시되고 자식 요소는 렌더링되지 않습니다.

    <igc-avatar
  initials="AZ"
  src="https://ko.infragistics.com/angular-demos/assets/images/men/1.jpg"
  alt="A photo of a man.">
  <igc-icon name="home"></igc-icon>
</igc-avatar>

    Shape

    아바타는 circle, rounded, square의 세 가지 모양을 지원합니다. 아바타의 기본 모양은 square 이며 shape 속성을 통해 변경할 수 있습니다.

    크기

    모양 외에도--ig-size CSS 변수를 활용하여 아바타의 크기를 변경할 수도 있습니다. 지원되는 크기는 small (기본값), medium 및 large 입니다. 다음 코드 조각은 다양한 구성요소 크기를 사용하는 방법을 보여줍니다.

    igc-avatar {
  --ig-size: var(--ig-size-large);
}

    Styling

    구성 요소는 IgcAvatarComponent 여러 CSS 부분을 노출하여 스타일을 완전히 제어할 수 있습니다.

    이름 설명
    base 아바타의 기본 래퍼입니다.
    initials 아바타의 이니셜 래퍼입니다.
    image 아바타의 이미지 래퍼입니다.
    icon 아바타의 아이콘 래퍼입니다. 
    igc-avatar::part(base) {
  --size: 60px;
  color: var(--ig-success-500-contrast);
  background: var(--ig-success-500);;
  border-radius: 20px;
}

    API References

    Additional Resources