DemoListTwoLinesAndSubheader.vue
1.73 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script setup>
const files = [
{
color: 'blue',
icon: 'ri-clipboard-line',
subtitle: 'Jan 20, 2014',
title: 'Vacation itinerary',
},
{
color: 'amber',
icon: 'ri-hard-drive-2-line',
subtitle: 'Jan 10, 2014',
title: 'Kitchen remodel',
},
]
const folders = [
{
subtitle: 'Jan 9, 2014',
title: 'Photos',
},
{
subtitle: 'Jan 17, 2014',
title: 'Recipes',
},
{
subtitle: 'Jan 28, 2014',
title: 'Work',
},
]
</script>
<template>
<VList lines="two">
<VListSubheader inset>
Folders
</VListSubheader>
<VListItem
v-for="folder in folders"
:key="folder.title"
:title="folder.title"
:subtitle="folder.subtitle"
>
<template #prepend>
<VAvatar
color="secondary"
variant="tonal"
>
<VIcon
:size="26"
icon="ri-folder-line"
/>
</VAvatar>
</template>
<template #append>
<VBtn
variant="text"
color="default"
icon="ri-information-line"
/>
</template>
</VListItem>
<VDivider inset />
<VListSubheader inset>
Files
</VListSubheader>
<VListItem
v-for="file in files"
:key="file.title"
:title="file.title"
:subtitle="file.subtitle"
>
<template #prepend>
<VAvatar
color="secondary"
variant="tonal"
>
<VIcon
:size="26"
:icon="file.icon"
/>
</VAvatar>
</template>
<template #append>
<VBtn
variant="text"
color="default"
icon="ri-information-line"
/>
</template>
</VListItem>
</VList>
</template>