JenniferSoft Design Docs

Appearance

BadgeDigit ​

Basic ​

vue
<script setup lang="ts">
    import { BadgeDigit } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-digit :value="10"/>
</template>
10

Props ​

PropTypeDefaultDescription
valuenumber0표시할 숫자 값
color'primary' | 'gray' | 'red' | 'green' | 'blue' | 'purple' | 'pink' | 'orange' | 'teal' | 'skyblue' | 'inverted' | 'gray-light' | 'red-light' | 'green-light' | 'blue-light' | 'purple-light' | 'pink-light' | 'orange-light' | 'teal-light' | 'skyblue-light' | 'inverted-light' | 'primary-inverted' | 'gray-inverted' | 'red-inverted' | 'green-inverted' | 'blue-inverted' | 'purple-inverted' | 'pink-inverted' | 'orange-inverted' | 'teal-inverted' | 'skyblue-inverted' | 'inverted-inverted''gray-light'배지 색상

1, 10, 100, 1000... ​

vue
<script setup lang="ts">
    import { BadgeDigit } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-digit :value="1"/>
    <badge-digit :value="10"/>
    <badge-digit :value="100"/>
    <badge-digit :value="1000"/>
    <badge-digit :value="10000"/>
    <badge-digit :value="100000"/>
</template>
1
10
100
1,000
10,000
100,000

Color ​

vue
<script setup lang="ts">
    import { BadgeDigit } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-digit color='gray' :value="10" />
    <badge-digit color='red' :value="10" />
    <badge-digit color='green'  :value="10" />
    <badge-digit color='blue'  :value="10" />
    <badge-digit color='purple'  :value="10" />
    <badge-digit color='pink'  :value="10" />
    <badge-digit color='orange'  :value="10" />
    <badge-digit color='teal'  :value="10" />
    <badge-digit color='skyblue'  :value="10" />
    <badge-digit color='inverted'  :value="10" />
    <badge-digit color='gray-light'  :value="10" />
    <badge-digit color='red-light'  :value="10" />
    <badge-digit color='green-light'  :value="10" />
    <badge-digit color='blue-light'  :value="10" />
    <badge-digit color='purple-light'  :value="10" />
    <badge-digit color='pink-light'  :value="10" />
    <badge-digit color='orange-light'  :value="10" />
    <badge-digit color='teal-light'  :value="10" />
    <badge-digit color='skyblue-light'  :value="10" />
    <badge-digit color='inverted-light'  :value="10" />
</template>
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10