83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
|
<script setup>
|
||
|
|
const languageProgress = [
|
||
|
|
{
|
||
|
|
avatar: 'tabler-brand-react',
|
||
|
|
title: 'React is a JavaScript library for building user interfaces',
|
||
|
|
language: 'react',
|
||
|
|
amount: 90,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
avatar: 'tabler-brand-bootstrap',
|
||
|
|
title: 'Bootstrap is an open source toolkit',
|
||
|
|
language: 'bootstrap',
|
||
|
|
amount: 80,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
avatar: 'tabler-brand-vue',
|
||
|
|
title: 'Vue.js is the Progressive JavaScript Framework',
|
||
|
|
language: 'vue',
|
||
|
|
amount: 65,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
avatar: 'tabler-brand-angular',
|
||
|
|
title: 'Angular implements Functional Programming concepts',
|
||
|
|
language: 'angular',
|
||
|
|
amount: 75,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
avatar: 'tabler-brand-javascript',
|
||
|
|
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
|
||
|
|
>
|
||
|
|
<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
|
||
|
|
rounded-bar
|
||
|
|
:model-value="progress.amount"
|
||
|
|
:color="resolveStatusColor[progress.language]"
|
||
|
|
/>
|
||
|
|
</VListItemSubtitle>
|
||
|
|
</VListItem>
|
||
|
|
|
||
|
|
<VDivider v-if="index !== languageProgress.length - 1" />
|
||
|
|
</template>
|
||
|
|
</VList>
|
||
|
|
</template>
|