Update ProgressBar.vue
This commit is contained in:
parent
8a6e41dcd9
commit
72af269615
@ -1,41 +1,36 @@
|
||||
<template>
|
||||
<div class="flex items-center w-48 h-full">
|
||||
<div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
|
||||
<div
|
||||
:style="{ width: value + '%' }"
|
||||
class="h-full rounded-full"
|
||||
:class="color"
|
||||
></div>
|
||||
</div>
|
||||
<div class="flex items-center w-48 h-full">
|
||||
<div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
|
||||
<div :style="{ width: value + '%' }" class="h-full rounded-full" :class="color"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProgressBar",
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "Progress",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "bg-blue-500",
|
||||
},
|
||||
<script>
|
||||
export default {
|
||||
name: "ProgressBar",
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
computed: {
|
||||
clampedValue() {
|
||||
return Math.max(0, Math.min(this.value, 100));
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "Progress",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
|
||||
</style>
|
||||
color: {
|
||||
type: String,
|
||||
default: "bg-blue-500",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
clampedValue() {
|
||||
return Math.max(0, Math.min(this.value, 100));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user