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

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

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

    Dot

    The Ignite UI for React badge component can also render as a minimal dot indicator for notifications by setting its dot attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).

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

    Styling

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

    igc-badge::part(base) {
    --background-color: var(--ig-error-A100);
    --border-radius: 2px;
}

    API References

    Additional Resources