Blazor 아바타

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

    Blazor Icon Avatar Example

    Usage

    사용하기IgbAvatar 전에 다음과 같이 등록해야 합니다:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbAvatar. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

    <IgbAvatar />

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

    <IgbAvatar>
  <IgbIcon Name="home" />
</IgbAvatar>

    Initials

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

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

<IgbAvatar Initials="AZ">
  <IgbIcon Name="home" />
</IgbAvatar>

    Image

    속성에Src 유효한 URL이 정적 자산에 할당되었을 때도 이미지를 표시할 수 있습니다. 이 경우 값은Initials 무시되고 자식 요소는 렌더링되지 않습니다.

    <IgbAvatar Initials="AZ"
           Src="https://static.infragistics.com/xplatform/images/people/GUY01.png"
           Alt="A photo of a man.">
  <IgbIcon Name="home" />
</IgbAvatar>

    Shape

    아바타는 세 가지 도형 -circle,,rounded 그리고square 지지합니다. 아바타의 기본 형태는 이고square, 속성을 통해shape 변경할 수 있습니다.

    크기

    형태 외에도 CSS 변수를 활용--ig-size 해 아바타의 크기도 변경할 수 있습니다. 지원되는 크기는 (기본값),small 그리고medium 다음과 같습니다large. 다음 코드 스니펫은 다른 컴포넌트 크기를 사용하는 방법을 보여줍니다:

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

    Styling

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