Badge 배지

아이콘 오른쪽 위에 표시되는 원형 배지 숫자예요.

출처: 문서

본문

언제 사용하나요?

아이콘 오른쪽 위나 목록 항목 오른쪽에 나타나, 상태 색과 숫자로 처리할 메시지가 있다고 알려 줄 때 사용해요.

기본 배지

::: demo 기본 배지 유형이에요. 감싸는 요소가 있으면 오른쪽 위에 배지와 개수를 표시해요.

<template>
  <d-badge :count="6" status="danger" class="badge-item">未读消息</d-badge>
  <d-badge :count="7" status="waiting" class="badge-item">未读消息</d-badge>
  <d-badge :count="8" status="success" class="badge-item">未读消息</d-badge>
  <d-badge :count="100" status="info" class="badge-item">未读消息</d-badge>
</template>

<style>
.badge-item {
  background-color: var(--devui-global-bg, #f3f6f8);
  margin-right: 20px;
  margin-bottom: 8px;
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 14px;
}
</style>

:::

점 배지

:::demo 점 배지 유형이에요. 감싸는 요소가 있고 show-dot 파라미터가 true이면 점 배지가 되고, 기본으로 오른쪽 위에 작은 점만 표시하고 개수는 보여 주지 않아요.

<template>
  <d-badge status="danger" show-dot class="badge-dot-item">
    <d-icon name="feedback" />
  </d-badge>
  <d-badge status="waiting" show-dot class="badge-dot-item">
    <d-icon name="feedback" />
  </d-badge>
  <d-badge status="warning" show-dot class="badge-dot-item">
    <d-icon name="feedback" />
  </d-badge>
  <d-badge status="info" show-dot class="badge-dot-item">
    <d-icon name="feedback" />
  </d-badge>
</template>

<style>
.badge-dot-item {
  margin-right: 20px;
}
</style>

:::

개수 배지

:::demo 배지를 독립적으로 사용하고 어떤 요소도 감싸지 않으면, 배지 상태 색과 개수만 표시해요.

<template>
  <ul class="badge-list">
    <li class="badge-list-item">
      <span>系统消息</span>
      <d-badge status="common" :count="50"></d-badge>
    </li>
    <li class="badge-list-item">
      <span>个人消息</span>
      <d-badge status="common" :count="500"></d-badge>
    </li>
  </ul>
</template>

<style>
.badge-list {
  width: 200px;
  font-size: 14px;
  background-color: var(--devui-base-bg, #fff);
  box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, 0.2));
}
.badge-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
}
</style>

:::

상태 배지

:::demo 배지를 독립적으로 사용하고 요소를 감싸지 않으며 show-dot 파라미터가 true이면 상태 배지가 되고, 상태마다 다른 색 점을 표시해요.

<template>
  <d-badge status="danger" show-dot></d-badge>
  &nbsp;danger
  <br />
  <d-badge status="warning" show-dot></d-badge>
  &nbsp;warning
  <br />
  <d-badge status="waiting" show-dot></d-badge>
  &nbsp;waiting
  <br />
  <d-badge status="info" show-dot></d-badge>
  &nbsp;info
  <br />
  <d-badge status="success" show-dot></d-badge>
  &nbsp;success
  <br />
</template>

:::

배지 위치

:::demo position 파라미터로 배지 위치를 설정해요.

<template>
  <d-badge :count="6" status="danger" position="top-left" class="badge-item">未读消息</d-badge>
  <d-badge :count="7" status="waiting" position="top-right" class="badge-item">未读消息</d-badge>
  <d-badge :count="8" status="success" position="bottom-left" class="badge-item">
    <d-icon name="emoji" />
  </d-badge>
  <d-badge :count="100" status="info" position="bottom-right" class="badge-item">
    <d-icon name="notice" />
  </d-badge>
</template>

:::

커스터마이즈

:::demo bg-color 파라미터로 배지 상태 색을 직접 정할 수 있어요(이때 status 파라미터로 설정한 상태 색은 무시돼요). offset 파라미터로 position 기준 배지 오프셋을 설정할 수도 있어요. text-color, bgColor로 글자 색과 배경 색을 커스터마이즈할 수 있어요.

<template>
  <d-badge :count="666" status="success" style="margin-right: 20px">
    <d-icon name="notice" />
  </d-badge>
  <d-badge :count="666" status="success" style="margin-right: 30px" :offset="[-10, 0]">
    <d-icon name="notice" />
  </d-badge>
  <d-badge count="6" style="margin-right: 20px" :offset="[0, -10]">未读消息</d-badge>
  <d-badge count="6" bg-color="red" text-color="#fff" style="margin-right: 20px">未读消息</d-badge>
  <d-badge count="2.3k" bg-color="#000" text-color="#fff"></d-badge>
</template>

:::

배지 숨기기

hidden 속성으로 배지 표시 여부를 설정해요.

::: demo

<template>
  <d-badge :hidden="isHidden" :count="6" status="danger" class="badge-item">未读消息</d-badge>
  <d-badge :hidden="isHidden" status="danger" show-dot class="badge-dot-item">
    <d-icon name="feedback" />
  </d-badge>
  <br />
  <d-button @click="hiddenNum">隐藏</d-button>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isHidden = ref(false);
    const hiddenNum = () => {
      isHidden.value = !isHidden.value;
    };
    return {
      isHidden,
      hiddenNum,
    };
  },
});
</script>

:::

Badge 파라미터

Badge 타입 정의

BadgeStatusType

type BadgeStatusType = 'danger' | 'warning' | 'waiting' | 'success' | 'info' | 'common';

BadgePositionType

type BadgePositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

더 알아보기 (Learn more)

Badge로 알림 개수와 상태를 아이콘 옆에 표시할 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.