Badge

Badge (배지)

출처: 문서

본문

Badge

버튼과 아이콘 위에 표시하는 숫자 또는 상태 표시예요.

기본 사용법

새 메시지의 개수를 표시해요. 개수는 Number나 String을 받는 value로 정의돼요.

최대값

최대값을 커스터마이즈할 수 있어요. 최대값은 Number인 max 속성으로 정의돼요. value가 Number일 때만 동작한다는 점에 주의하세요.

커스터마이즈

숫자가 아닌 텍스트 내용을 표시할 수 있어요. 또는 content 슬롯으로 내용을 커스터마이즈할 수 있어요. value가 String이면 커스터마이즈된 텍스트를 표시할 수 있어요. 또는 content 슬롯을 사용해요.

import { Message } from '@element-plus/icons-vue'

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.custom-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

빨간 점

주의가 필요한 내용을 빨간 점으로 표시해요. is-dot 속성을 사용해요. Boolean이에요.

Offset 2.7.0

배지 점의 오프셋을 설정해요. 형식은 [left, top]으로, 기본 위치에서 왼쪽과 위쪽으로의 오프셋을 나타내요.

API

Attributes

Name Description Type Default
value 표시 값 string / number ''
max 최대값, 초과하면 {max}+로 표시돼요. value가 숫자일 때만 동작해요 number 99
is-dot 작은 점을 표시할지 여부 boolean false
hidden 배지 숨김 boolean false
type 배지 유형 enum danger
show-zero 2.6.0 value가 0일 때 배지를 표시할지 여부 boolean true
color 2.6.3 점의 배경색 string
offset 2.7.0 배지의 오프셋 array [0, 0]
badge-style 2.7.1 배지의 커스텀 스타일 object —
badge-class 2.7.1 배지의 커스텀 클래스 string —

Slots

Name Description Type
default 기본 내용을 커스터마이즈해요 -
content 2.9.1 배지 내용을 커스터마이즈해요 object

더 알아보기 (Learn more)