mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-04-06 01:25:38 +00:00
43 lines
864 B
Vue
43 lines
864 B
Vue
<template>
|
|
<div
|
|
class="ds-number"
|
|
:class="[
|
|
size && `ds-number-size-${size}`
|
|
]"
|
|
>
|
|
<ds-text
|
|
:size="size"
|
|
class="ds-number-count"
|
|
style="margin-bottom: 0">
|
|
<slot name="count">{{ count }}</slot>
|
|
</ds-text>
|
|
<ds-text
|
|
:uppercase="uppercase"
|
|
:size="labelSize"
|
|
class="ds-number-label"
|
|
color="soft">
|
|
{{ label }}
|
|
</ds-text>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'DsNumber',
|
|
|
|
props: {
|
|
size: { type: String, default: 'x-large' },
|
|
labelSize: { type: String, default: 'small' },
|
|
count: { type: [Number, String], default: 0 },
|
|
label: { type: String, default: null },
|
|
uppercase: { type: Boolean, default: false }
|
|
},
|
|
});
|
|
</script>
|
|
|
|
|
|
<style lang="scss" src="./style.scss">
|
|
</style>
|