Blazor 배지 개요

    Ignite UI for Blazor 시각적 알림이 필요할 때 애플리케이션의 아바타, 탐색 메뉴 또는 기타 구성 요소와 함께 사용되는 구성 요소입니다. 배지는 일반적으로 정보, 성공, 경고 또는 오류를 전달하기 위해 미리 정의된 스타일로 디자인됩니다.

    Blazor Badge Example

    Usage

    ​IgbBadge 사용하기 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

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

    또한 IgbBadge 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

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

    <IgbBadge />

    배지 주위에 미묘한 테두리를 표시하려면 배지의 outlined 속성을 설정하면 됩니다.

    <IgbBadge Outlined="true" />

    Examples

    Variants

    Ignite UI for Blazor 사전 정의된 여러 스타일 변형을 지원합니다. 변형 속성에 지원되는 값인 primary (기본값), info, success, warning 또는 danger 중 하나를 할당하여 variant을 변경할 수 있습니다.

    <IgbBadge Variant="@BadgeVariant.Success" />

    Shape

    배지 구성 요소는 rounded (기본값) 모양과 square 모양을 지원합니다. 이러한 값은 shape 속성에 할당될 수 있습니다.

    <IgbBadge Shape="@BadgeShape.Square" />

    Styling

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

    igc-badge::part(base) {
  color: olive;
  background: beige;
  border-radius: 2px;
}

    API References

    Additional Resources