숫자 배지

숫자를 표시하는 배지입니다.

#badge #number #count

5 999+

HTML

<div class="krds-badge-wrap">
	<span class="krds-badge bg-primary number">5</span>
	<span class="krds-badge bg-primary number">999+</span>
</div>

<div class="krds-badge-wrap">
	<span class="krds-badge bg-point number">5</span>
	<span class="krds-badge bg-point number">999+</span>
</div>

Vue 컴포넌트

<template>
  <div class="krds-badge-wrap">
	<span class="krds-badge bg-primary number">5</span>
	<span class="krds-badge bg-primary number">999+</span>
</div>

<div class="krds-badge-wrap">
	<span class="krds-badge bg-point number">5</span>
	<span class="krds-badge bg-point number">999+</span>
</div>
</template>

<script setup lang="ts">
// 숫자 배지 컴포넌트
// 숫자를 표시하는 배지입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>

컴포넌트 정보

파일명: badge_number.html
카테고리: 표시
난이도: 쉬움