Web Components Badge 개요

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

    Web Components 배지 예시

    EXAMPLE
    TS
    HTML
    CSS

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    용법

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

    npm install igniteui-webcomponents
    cmd

    그런 다음 다음과 같이 필요한 CSS인 IgcBadgeComponent를 가져오고 해당 모듈을 등록해야 합니다.

    import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcBadgeComponent);
    ts

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    사용을 IgcBadgeComponent 시작하는 가장 간단한 방법은 다음과 같습니다.

    <igc-badge></igc-badge>
    html

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

    <igc-badge outlined></igc-badge>
    html
    Ignite UI for Web Components | CTA 배너

    변형

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

    <igc-badge variant="success"></igc-badge>
    html

    EXAMPLE
    TS
    HTML
    CSS

    모양

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

    <igc-badge shape="square"></igc-badge>
    html

    EXAMPLE
    TS
    HTML
    CSS

    스타일링

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

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

    API 참조

    추가 리소스