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

    The Ignite UI for React badge supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - primary(default), info, success, warning, or danger to the variant attribute.

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

    Shape

    배지 컴포넌트는 기본으로 지지하는rounded 것과square 도형을 사용합니다. 이 값들은 속성에shape 할당할 수 있습니다.

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

    Styling

    이 컴포넌트는IgrBadge​base 모든 스타일 속성을 변경할 수 있는 CSS 파트를 노출합니다.

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

    API References

    Additional Resources