DemoListProgressList.vue
1.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script setup>
const languageProgress = [
{
avatar: 'ri-reactjs-line',
title: 'React is a JavaScript library for building user interfaces',
language: 'react',
amount: 90,
},
{
avatar: 'ri-bootstrap-line',
title: 'Bootstrap is an open source toolkit',
language: 'bootstrap',
amount: 80,
},
{
avatar: 'ri-vuejs-line',
title: 'Vue.js is the Progressive JavaScript Framework',
language: 'vue',
amount: 65,
},
{
avatar: 'ri-angularjs-line',
title: 'Angular implements Functional Programming concepts',
language: 'angular',
amount: 75,
},
{
avatar: 'ri-javascript-line',
title: 'JavaScript is the programming language of the Web',
language: 'javascript',
amount: 70,
},
]
const resolveStatusColor = {
react: 'info',
bootstrap: 'primary',
vue: 'success',
angular: 'error',
javascript: 'warning',
}
</script>
<template>
<VList
lines="two"
border
rounded
>
<template
v-for="(progress, index) of languageProgress"
:key="progress.language"
>
<VListItem>
<template #prepend>
<VAvatar
size="36"
rounded
variant="tonal"
:icon="progress.avatar"
:color="resolveStatusColor[progress.language]"
/>
</template>
<VListItemTitle>
{{ progress.title }}
</VListItemTitle>
<VListItemSubtitle class="mt-2">
<VProgressLinear
height="6"
rounded
:model-value="progress.amount"
bg-color="secondary"
:color="resolveStatusColor[progress.language]"
/>
</VListItemSubtitle>
</VListItem>
<VDivider v-if="index !== languageProgress.length - 1" />
</template>
</VList>
</template>