React Avatar

    Ignite UI for React 애플리케이션에서 이니셜, 이미지 또는 아이콘을 표시하는 데 도움이 됩니다.

    React Icon Avatar Example

    Usage

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그 다음에는 다음과 같이 필요한 CSS를IgrAvatar 가져오면 됩니다:

    import { IgrAvatar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    ​IgrAvatar이미지, 이니셜 또는 아이콘 등 모든 콘텐츠를 표시할 수 있습니다. anIgrAvatar 선언은 다음과 같이 간단합니다:

    <IgrAvatar />

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

    <IgrAvatar>
    <IgrIcon name="home" />
</IgrAvatar>

    Initials

    If the initials attribute is set all children elements of the avatar will be ignored and the string passed to this attribute will be displayed.

    <IgrAvatar initials="AZ">
    <IgrIcon name="home" />
</IgrAvatar>

    Image

    The avatar can also display an image when the src attribute is assigned a valid URL to a static asset. In that case the initials value will be ignored and children elements will not be rendered.

    <IgrAvatar initials="AZ"
           src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
           alt="A photo of a man.">
    <IgrIcon name="home" />
</IgrAvatar>

    Shape

    The avatar supports three shapes - circle, rounded, and square. The default shape of the avatar is square and it can be changed via the shape attribute.

    크기

    Apart from the shape, the size of the avatar can also be changed by utilizing the --ig-size CSS variable. The supported sizes are small (default), medium, and large. The following code snippet shows how to use a different component size:

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

    Styling

    이 컴포넌트는IgrAvatar 여러 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