/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-hover/misc-transition.vue
54 строки
1 KB
J-Sek
feat: migrate to MD3 typography (#22557)
28 янв 2026, 21:50
Не верифицирован
28 янв 2026, 21:50
311daf4
Код
Авторство
О чём код?
<template> <div> <v-hover v-slot="{ isHovering, props }"> <v-card class="mx-auto" color="grey-lighten-4" max-width="600" v-bind="props" > <v-img :aspect-ratio="16/9" src="https://cdn.vuetifyjs.com/images/cards/kitchen.png" cover > <v-expand-transition> <div v-if="isHovering" class="d-flex bg-orange-darken-2 v-card--reveal text-display-large" style="height: 100%;" > $14.99 </div> </v-expand-transition> </v-img> <v-card-text class="pt-6"> <div class="font-weight-light text-grey text-title-large mb-2"> For the perfect meal </div> <h3 class="text-headline-large font-weight-light text-orange mt-0 mb-2"> QW cooking utensils </h3> <div class="font-weight-light text-title-large mb-2"> Our Vintage kitchen utensils delight any chef.<br> Made of bamboo by hand </div> </v-card-text> </v-card> </v-hover> </div> </template> <style> .v-card--reveal { align-items: center; bottom: 0; justify-content: center; opacity: .9; position: absolute; width: 100%; } </style>