✨ 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