KRDS Angular

배지 Badge ​

컴포넌트에 대한 빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터이다. 컴포넌트의 분류 체계, 구조화된 정보, 상태 정보, 기타 메타 데이터를 표시할 수 있으며 사용자의 주의를 끌기 위해 색상을 활용할 수 있다.

KRDS 가이드

기본 ​

기본 요소(보통 <span>)에 krdsBadge를 붙입니다. 속성을 지정하지 않으면 type="outline", color="primary", size="large"로 표시됩니다.

ts
import { Component } from '@angular/core'
import { KrdsBadge } from '@krds.ui/angular'

@Component({
  selector: 'demo-badge-basic',
  imports: [KrdsBadge],
  template: ` <span krdsBadge>label</span> `
})
export default class BadgeBasic {}

기본 전체 ​

type(outline, bg, bg-light)과 color의 조합입니다. 행마다 size를 large, medium, small로 달리했습니다.

ts
import { Component } from '@angular/core'
import { KrdsBadge, type KrdsBadgeColor, type KrdsBadgeSize, type KrdsBadgeType } from '@krds.ui/angular'

@Component({
  selector: 'demo-badge-all',
  imports: [KrdsBadge],
  template: `
    <div style="display: flex; flex-direction: column; gap: 1rem">
      @for (row of rows; track row.type) {
        <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
          @for (color of colors; track color) {
            <span krdsBadge [type]="row.type" [color]="color" [size]="row.size">label</span>
          }
        </div>
      }
    </div>
  `
})
export default class BadgeAll {
  readonly rows: { type: KrdsBadgeType; size: KrdsBadgeSize }[] = [
    { type: 'outline', size: 'large' },
    { type: 'bg', size: 'medium' },
    { type: 'bg-light', size: 'small' }
  ]
  readonly colors: KrdsBadgeColor[] = ['primary', 'secondary', 'gray', 'point', 'danger', 'warning', 'success', 'information']
}

넘버 배지 ​

숫자를 보여 줄 때는 number를 붙입니다.

ts
import { Component } from '@angular/core'
import { KrdsBadge } from '@krds.ui/angular'

@Component({
  selector: 'demo-badge-number-badge',
  imports: [KrdsBadge],
  template: `
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
      <span krdsBadge type="bg" color="primary" number>1234</span>
      <span krdsBadge type="bg" color="point" number>1234</span>
    </div>
  `
})
export default class BadgeNumberBadge {}

KrdsBadge ​

선택자 [krdsBadge]

Inputs

이름타입기본값설명
type'outline' | 'bg' | 'bg-light''outline'형태
color'primary' | 'secondary' | 'gray' | 'point' | 'danger' | 'warning' | 'success' | 'information' | 'disabled''primary'색
size'small' | 'medium' | 'large''large'크기
numberbooleanfalse숫자 배지