DemoListNav.vue
1015 Bytes
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
<script setup>
const items = [
{
title: 'My Files',
value: 1,
prependIcon: 'ri-folder-line',
},
{
title: 'Shared with me',
value: 2,
prependIcon: 'ri-group-line',
},
{
title: 'Starred',
value: 3,
prependIcon: 'ri-star-line',
},
{
title: 'Recent',
value: 4,
prependIcon: 'ri-history-line',
},
{
title: 'Offline',
value: 5,
prependIcon: 'ri-checkbox-circle-line',
},
{
title: 'Uploads',
value: 6,
prependIcon: 'ri-upload-line',
},
{
title: 'Backups',
value: 7,
prependIcon: 'ri-upload-cloud-line',
},
]
</script>
<template>
<VList
nav
:lines="false"
>
<VListItem
v-for="item in items"
:key="item.value"
:value="item.value"
>
<template #prepend>
<VIcon
:icon="item.prependIcon"
class="me-3"
/>
</template>
<VListItemTitle>
{{ item.title }}
</VListItemTitle>
</VListItem>
</VList>
</template>