React 배지 개요

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

    React Badge Example

    Usage

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

    npm install igniteui-react

    그런 다음 다음과 같이 필요한 CSS를 가져와야 합니다. IgrBadge​

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

    <IgrBadge />

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

    <IgrBadge outlined={true} ></IgrBadge>

    Examples

    Variants

    Ignite UI for React 배지는 미리 정의된 몇 가지 스타일 변형을 지원합니다. 지원되는 값 -primary (기본값), info, success,또는 warning​ ​danger 속성에 variant 할당하여 변형을 변경할 수 있습니다.

    <IgrBadge variant="success" ></IgrBadge>

    Shape

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

    <IgrBadge shape="square" ></IgrBadge>

    Styling

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

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

    API References

    Additional Resources