Blazor 아바타
Ignite UI for Blazor 애플리케이션에 이니셜, 이미지 또는 아이콘을 표시하는 데 도움이 됩니다.
Blazor Icon Avatar Example
Usage
IgbAvatar
사용하기 전에 다음과 같이 등록해야 합니다.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
또한 IgbAvatar
구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor UI에 대한 전체 소개는 시작 항목을 참조하세요.
IgbAvatar
이미지, 이니셜 또는 아이콘을 포함한 기타 콘텐츠를 표시할 수 있습니다. IgbAvatar
선언은 다음과 같이 간단합니다.
<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
속성을 통해 변경할 수 있습니다.
크기
모양 외에도--ig-size
CSS 변수를 활용하여 아바타의 크기를 변경할 수도 있습니다. 지원되는 크기는 small
(기본값), medium
및 large
입니다. 다음 코드 조각은 다양한 구성요소 크기를 사용하는 방법을 보여줍니다.
igc-avatar {
--ig-size: var(--ig-size-large);
}
Styling
아바타 구성 요소는 모든 스타일 속성을 변경하는 데 사용할 수 있는 base
부분을 노출합니다.
igc-avatar::part(base) {
--size: 72px;
color: olive;
background: beige;
border-radius: 20px;
}