mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
80 lines
1.8 KiB
Vue
Executable File
80 lines
1.8 KiB
Vue
Executable File
<template>
|
|
<div class="wrapper">
|
|
<div :class="`progress-${type}`" v-if="showLabel">
|
|
<div class="progress-label">
|
|
<slot name="label">
|
|
<span>{{ label }}</span>
|
|
</slot>
|
|
</div>
|
|
<div class="progress-percentage">
|
|
<slot>
|
|
<span>{{ value }}%</span>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
<b-progress :size="size" :class="[progressClasses]" :style="`height: ${height}px`">
|
|
<b-progress-bar :class="computedClasses" :value="value"></b-progress-bar>
|
|
</b-progress>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'base-progress',
|
|
props: {
|
|
striped: {
|
|
type: Boolean,
|
|
description: 'Whether progress is striped',
|
|
},
|
|
animated: {
|
|
type: Boolean,
|
|
description: 'Whether progress is animated (works only with `striped` prop together)',
|
|
},
|
|
label: {
|
|
type: String,
|
|
description: 'Progress label (shown on the left above progress)',
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 3,
|
|
description: 'Progress line height',
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'default',
|
|
description: 'Progress type (e.g danger, primary etc)',
|
|
},
|
|
showLabel: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
progressClasses: {
|
|
type: [Array, String],
|
|
default: '',
|
|
description: 'Progress css classes',
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
value: {
|
|
type: Number,
|
|
default: 0,
|
|
validator: (value) => {
|
|
return value >= 0 && value <= 100
|
|
},
|
|
description: 'Progress value',
|
|
},
|
|
},
|
|
computed: {
|
|
computedClasses() {
|
|
return [
|
|
{ 'progress-bar-striped': this.striped },
|
|
{ 'progress-bar-animated': this.animated },
|
|
{ [`bg-${this.type}`]: this.type },
|
|
]
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style></style>
|