69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
const fav = ref(true);
|
|
const menu = ref(false);
|
|
const message = ref(false);
|
|
const hints = ref(true);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-center mt-4">
|
|
<v-menu v-model="menu" :close-on-content-click="false" anchor="top">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn color="secondary" v-bind="props" flat> Menu as Popover </v-btn>
|
|
</template>
|
|
|
|
<v-card min-width="300">
|
|
<v-list>
|
|
<v-list-item
|
|
prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
|
|
title="John Leider"
|
|
subtitle="Founder of Vuetify"
|
|
>
|
|
<template v-slot:append>
|
|
<v-btn
|
|
variant="text"
|
|
:class="fav ? 'text-primary' : ''"
|
|
icon="mdi-heart"
|
|
@click="fav = !fav"
|
|
flat></v-btn>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-list>
|
|
<v-list-item >
|
|
<v-switch
|
|
v-model="message"
|
|
color="primary"
|
|
label="Enable messages"
|
|
hide-details
|
|
class="pl-2"
|
|
></v-switch>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-switch
|
|
v-model="hints"
|
|
color="primary"
|
|
label="Enable hints"
|
|
hide-details
|
|
class="pl-2"
|
|
></v-switch>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn variant="text" @click="menu = false" flat> Cancel </v-btn>
|
|
<v-btn color="primary" variant="text" @click="menu = false" flat> Save </v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-menu>
|
|
</div>
|
|
</template>
|
|
|