Badge 배지

아이콘/버튼 모서리의 숫자 또는 상태 표시입니다. 타입별 색상, max 잘림, 점(dot), 0값 표시/숨김, 위치 오프셋을 지원합니다.

배지

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge :value="12" type="primary">
        <LhButton>안 읽은 메시지</LhButton>
      </LhBadge>
      <LhBadge :value="999" :max="99">
        <LhButton>max 초과 잘림</LhButton>
      </LhBadge>
      <LhBadge is-dot>
        <LhButton>점 모드</LhButton>
      </LhBadge>
      <LhBadge :value="0" :show-zero="true">
        <LhButton>showZero</LhButton>
      </LhBadge>
      <LhBadge :value="0">
        <LhButton>0값은 기본 숨김</LhButton>
      </LhBadge>
      <LhBadge :value="3" type="danger" size="small">
        <LhButton>small 크기</LhButton>
      </LhBadge>
    </div>
    <p class="demo-note">offset으로 위치 미세 조정 / hidden 숨김 / content 사용자 정의 텍스트</p>
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge content="인기" type="danger" :offset="[6, 4]">
        <LhButton>offset 오프셋</LhButton>
      </LhBadge>
      <LhBadge :value="5" :hidden="hidden">
        <LhButton>hidden 토글</LhButton>
      </LhBadge>
      <LhButton size="small" @click="hidden = !hidden">{{ hidden ? '배지 표시' : '배지 숨기기' }}</LhButton>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    hidden: false,
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
type	타입별 색상	'primary' \| 'success' \| 'warning' \| 'danger'	'danger'
value	배지 숫자값 (max 초과 시 max+로 잘림)	string \| number	—
size	크기	'small' \| 'default' \| 'large'	'default'
max	숫자값 상한	number	—
isDot	점 모드 (value 무시)	boolean	false
hidden	배지 숨김	boolean	false
offset	기본 위치 기준 오프셋 [x, y]	[number, number]	—
showZero	value가 0일 때도 표시할지 여부	boolean	false
content	사용자 정의 텍스트 (value 덮어쓰기)	string	—
sx	sx 레이아웃 단축 프로퍼티	—	—

Slots

기본 슬롯: 배지가 부착되는 호스트 요소.