✨ feature: ProgressBar component added
This commit is contained in:
parent
e4cb0aa5d5
commit
d150473709
30
src/components/progressbar/VProgressBar.vue
Normal file
30
src/components/progressbar/VProgressBar.vue
Normal file
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import ProgressBar from 'primevue/progressbar';
|
||||
import type IVProgressBar from './IVProgressBar.type';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = withDefaults(defineProps<IVProgressBar>(), {
|
||||
value: 0,
|
||||
showValue: false,
|
||||
indeterminate: false,
|
||||
small: false,
|
||||
});
|
||||
|
||||
const mode = computed(() => (props.indeterminate ? 'indeterminate' : 'determinate'));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProgressBar
|
||||
:mode="mode"
|
||||
:value="props.value"
|
||||
:show-value="props.showValue && !props.small"
|
||||
:class="['p-progressbar', {small: props.small}]"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<slot/>
|
||||
</ProgressBar>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.p-progressbar.small {--p-progressbar-height: 0.5rem;}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user