Badge 배지

LhBadge는 읽지 않은 메시지 수나 상태 표시에 사용합니다.

기본 사용법

⁵

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge :value="5">
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge :value="5">
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

최댓값 지정

⁹⁹⁺

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

점 표시

is-dot는 작은 빨간 점만 표시하고 구체적인 숫자는 보여주지 않습니다. '업데이트 있음'류 알림에 적합하며, type으로 색상을 바꿀 수 있습니다.

메시지

할 일

vue

<script setup lang="ts">
</script>

<template>
  <!-- 점 표시 -->
  <LhBadge is-dot>
    <div>대상 콘텐츠</div>
  </LhBadge>
  <!-- 점 표시(경고색) -->
  <LhBadge is-dot type="warning">
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 점 표시 -->
  <LhBadge is-dot>
    <div>대상 콘텐츠</div>
  </LhBadge>
  <!-- 점 표시(경고색) -->
  <LhBadge is-dot type="warning">
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

오프셋, 0값, 커스텀 내용

offset으로 배지 위치를 미세 조정합니다([x, y] 픽셀 오프셋). show-zero로 0값도 표시하고, content로 숫자 대신 커스텀 문구를 사용합니다.

offset

⁵

show-zero

⁰

content

^새

vue

<script setup lang="ts">
</script>

<template>
  <!-- 오프셋 -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>대상 콘텐츠</div>
  </LhBadge>
  <!-- 0값도 표시 -->
  <LhBadge :value="0" show-zero>
    <div>대상 콘텐츠</div>
  </LhBadge>
  <!-- 커스텀 내용 -->
  <LhBadge value="새" content="새">
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 오프셋 -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>대상 콘텐츠</div>
  </LhBadge>
  <!-- 0값도 표시 -->
  <LhBadge :value="0" show-zero>
    <div>대상 콘텐츠</div>
  </LhBadge>
  <!-- 커스텀 내용 -->
  <LhBadge value="새" content="새">
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge is-dot>
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge is-dot>
    <div>대상 콘텐츠</div>
  </LhBadge>
</template>

타입

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

크기

⁵

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

표시와 숨기기 제어

¹⁰

vue

<script setup lang="ts">
import { ref } from 'vue'

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>대상 콘텐츠</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? '표시' : '숨기기' }}
  </LhButton>
</template>

vue

<script>
import { ref } from 'vue'

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>대상 콘텐츠</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? '표시' : '숨기기' }}
  </LhButton>
</template>

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/badge/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhBadgeProps

export interface LhBadgeProps {
  type?: LhBadgeType
  value?: string | number
  size?: LhBadgeSize
  max?: number
  isDot?: boolean
  hidden?: boolean
  offset?: [number, number]
  showZero?: boolean
  content?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhBadgeSize

export type LhBadgeSize = LhComponentSize

LhBadgeOffset

export type LhBadgeOffset = [number, number]

LhBadgeType _{(@lh-ui/share/core/badge에서 가져옴)}

export type LhBadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'

LhComponentSize _{(@lh-ui/share/core/shared에서 가져옴)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

국제화

배지 글자는 LhConfigProvider와 언어 팩으로 국제화 전환을 구현할 수 있습니다.

消息

⁵

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhBadge, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- ConfigProvider로 언어 팩 전환 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhBadge, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhBadge, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- ConfigProvider로 언어 팩 전환 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

API

속성	설명	타입	기본값
type	배지 타입	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'danger'`
value	표시값	`string \| number`	—
size	크기	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
max	최댓값	`number`	`99`
isDot	작은 점 모드	`boolean`	`false`
hidden	숨김 여부	`boolean`	`false`
offset	오프셋	`[number, number]`	—
showZero	0 표시 여부	`boolean`	`false`
content	커스텀 내용	`string`	—
sx	빠른 레이아웃 속성(예: `{ mt: 2, w: '50%' }`), 인라인 스타일로 변환되어 루트 요소에 적용	`LhSxProps`	—

접근성

작은 점 모드(is-dot)의 배지는 순수 장식이며 aria-hidden으로 표시되어 접근성 트리에 들어가지 않습니다
숫자 모드는 텍스트 내용을 유지하여 스크린 리더가 '99+' 등의 카운트를 읽을 수 있습니다

Badge 배지 ​

기본 사용법 ​

최댓값 지정 ​

점 표시 ​

오프셋, 0값, 커스텀 내용 ​

타입 ​

크기 ​

표시와 숨기기 제어 ​

타입 정의 ​

국제화 ​

API ​

접근성 ​