42 lines
1003 B
Vue
42 lines
1003 B
Vue
<template>
|
|
<q-page class="row items-start justify-evenly">
|
|
<SocketTest />
|
|
<div class="col"></div>
|
|
<div class="col">
|
|
<div class="q-pa-md">
|
|
<q-btn color="purple" @click="showNotif" label="Show Notification" />
|
|
</div>
|
|
</div>
|
|
<div class="col" style="border: 5px pink dashed;" >
|
|
<q-icon :name="darkStatus" size="100px" @click="toggleDarkLight" />
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useQuasar } from 'quasar'
|
|
import { computed } from 'vue'
|
|
import SocketTest from 'components/SocketTest.vue'
|
|
const $q = useQuasar()
|
|
|
|
const darkStatus = computed(() => $q.dark.isActive ? 'dark_mode' : 'light_mode')
|
|
|
|
function toggleDarkLight() {
|
|
$q.dark.toggle()
|
|
}
|
|
|
|
|
|
function showNotif() {
|
|
$q.notify({
|
|
message: 'This is a notification',
|
|
color: 'green',
|
|
position: 'top-right',
|
|
timeout: 3000,
|
|
actions: [
|
|
{ label: 'Dismiss', color: 'white', handler: () => { /* Dismiss action */ } }
|
|
]
|
|
})
|
|
}
|
|
</script>
|
|
|