59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
|
<script setup>
|
||
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
||
|
|
import avatar2 from '@images/avatars/avatar-2.png'
|
||
|
|
import avatar3 from '@images/avatars/avatar-3.png'
|
||
|
|
import avatar4 from '@images/avatars/avatar-4.png'
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
type: 'subheader',
|
||
|
|
title: 'Today',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prependAvatar: avatar1,
|
||
|
|
title: 'Brunch this weekend?',
|
||
|
|
subtitle: '<span class="text-primary">Ali Connors</span> — I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'divider',
|
||
|
|
inset: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prependAvatar: avatar2,
|
||
|
|
title: 'Summer BBQ',
|
||
|
|
subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> — Wish I could come, but I\'m out of town this weekend.',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'divider',
|
||
|
|
inset: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prependAvatar: avatar3,
|
||
|
|
title: 'Oui oui',
|
||
|
|
subtitle: '<span class="text-primary">Sandra Adams</span> — Do you have Paris recommendations? Have you ever been?',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'divider',
|
||
|
|
inset: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prependAvatar: avatar4,
|
||
|
|
title: 'Birthday gift',
|
||
|
|
subtitle: '<span class="text-primary">Trevor Hansen</span> — Have any ideas about what we should get Heidi for her birthday?',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<VList
|
||
|
|
lines="three"
|
||
|
|
:items="items"
|
||
|
|
item-props
|
||
|
|
>
|
||
|
|
<template #subtitle="{ subtitle }">
|
||
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||
|
|
<div v-html="subtitle" />
|
||
|
|
</template>
|
||
|
|
</VList>
|
||
|
|
</template>
|