Blazor 배지 개요

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

    Blazor Badge Example

    Usage

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

    // in Program.cs file

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

    ​IgbBadge 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 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

    배지 구성 요소는 supports rounded (기본값) 및 square 모양입니다. 이러한 값은 속성에 할당할 수 있습니다 Shape.

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

    Styling

    구성 요소는 IgbBadge 모든 스타일 속성을 변경하는 데 사용할 수 있는 CSS 파트를 노출 base 합니다.

    igc-badge::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  border-radius: 2px;
}

    API References

    Additional Resources