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

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