I just started using Vuetify and I came across a v-list sample that I need help with. Here is the link to the Vuetify v-list sample on Github.
My v-list:
https://i.sstatic.net/ykTIi.jpg
Code:
<template>
<v-card
max-width="500"
class="mx-auto"
>
<v-toolbar
color="pink"
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Inbox</v-toolbar-title>
</v-toolbar>
<v-list two-line>
<v-list-item-group
v-model="selected"
multiple
active-class="pink--text"
>
<template v-for="(item, index) in items">
<v-list-item :key="item.title">
<template v-slot:default="{ active, toggle }">
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle class="text--primary" v-text="item.headline"></v-list-item-subtitle>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-list-item-action-text v-text="item.action"></v-list-item-action-text>
</v-list-item-action>
</template>
</v-list-item>
<v-divider
v-if="index + 1 < items.length"
:key="index"
></v-divider>
</template>
</v-list-item-group>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
selected: [2],
items: [
{
action: '15 min',
headline: 'Brunch this weekend?',
title: 'Ali Connors',
subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
},
{
action: '2 hr',
headline: 'Summer BBQ',
title: 'me, Scrott, Jennifer',
subtitle: "Wish I could come, but I'm out of town this weekend.",
},
{
action: '6 hr',
headline: 'Oui oui',
title: 'Sandra Adams',
subtitle: 'Do you have Paris recommendations? Have you ever been?',
},
{
action: '12 hr',
headline: 'Birthday gift',
title: 'Trevor Hansen',
subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
},
{
action: '18hr',
headline: 'Recipe to try',
title: 'Britta Holt',
subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
},
],
}),
}
</script>
While working on my v-list, I want each v-list-item to display a light white background with some shadow and a central button when hovered over (similar to what I designed in Photoshop):
https://i.sstatic.net/hqvm9.jpg
Should I make use of the v-hover component for this effect? And can you suggest the best style to achieve this hover effect?
Thank you!