Web Components 아바타

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

    Web Components Icon Avatar Example

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

    npm install igniteui-webcomponents
    cmd
    import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcAvatarComponent);
    ts

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

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

    <igc-avatar></igc-avatar>
    html

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

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

    Initials

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

    <!-- Initials("AZ") will be displayed instead of the icon. -->
    
    <igc-avatar initials="AZ">
      <igc-icon name="home"></igc-icon>
    </igc-avatar>
    html

    EXAMPLE
    TS
    HTML
    CSS

    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>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Shape

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

    EXAMPLE
    TS
    HTML
    CSS

    크기

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

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

    EXAMPLE
    TS
    HTML
    AvatarSize.css
    index.css

    Styling

    아바타 구성 요소는 모든 스타일 속성을 변경하는 데 사용할 수 있는 base 부분을 노출합니다.

    igc-avatar::part(base) {
      --size: 72px;
      color: olive;
      background: beige;
      border-radius: 20px;
    }
    css
    Ignite UI for Web Components | CTA Banner

    API References

    Additional Resources