Web Components Badge 개요

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

Web Components Badge Example

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

defineComponents(IgcBadgeComponent);
export class BadgeOutlined {
    constructor() {
    }
}

new BadgeOutlined();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Badge Outlined</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="sample center">
      <igc-badge outlined></igc-badge>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

먼저 다음 명령을 실행하여 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

Examples

Variants

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

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

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

defineComponents(IgcBadgeComponent);
export class BadgeVariants {
    constructor() {
    }
}

new BadgeVariants();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Badge Variants</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="sample center">
      <igc-badge variant="success"></igc-badge>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Shape

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

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

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

defineComponents(IgcBadgeComponent);
export class BadgeShape {
    constructor() {
    }
}

new BadgeShape();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Badge Shape</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="sample center">
      <igc-badge shape="square"></igc-badge>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

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

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