moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
resources/js/views/demos/components/list/DemoListTwoLinesAndSubheader.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup>
const files = [
{
color: 'blue',
icon: 'tabler-clipboard-text',
subtitle: 'Jan 20, 2014',
title: 'Vacation itinerary',
},
{
color: 'amber',
icon: 'tabler-device-mobile-rotated',
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="22"
icon="tabler-folder"
/>
</VAvatar>
</template>
<template #append>
<VBtn
variant="text"
color="default"
icon="tabler-info-circle"
/>
</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="22"
:icon="file.icon"
/>
</VAvatar>
</template>
<template #append>
<VBtn
variant="text"
color="default"
icon="tabler-info-circle"
/>
</template>
</VListItem>
</VList>
</template>