37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
<script>
|
|
import { ref } from 'vue';
|
|
import { InfoCircleIcon, XIcon } from 'vue-tabler-icons';
|
|
export default {
|
|
setup() {
|
|
const showSnackbar = ref(false);
|
|
const close = () => {
|
|
showSnackbar.value = false;
|
|
};
|
|
|
|
setTimeout(() => {
|
|
showSnackbar.value = true;
|
|
}, 1500); // Adjust the delay in milliseconds (here 3 seconds)
|
|
|
|
return {
|
|
showSnackbar,
|
|
close
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-snackbar rounded="md" color="primary" class="mt-n3" v-model="showSnackbar" location="top right" elevation="0">
|
|
<div class="d-flex gap-2">
|
|
<InfoCircleIcon size="22" />
|
|
<div class="">
|
|
<h5 class="text-body-1">Welcome to MatDash</h5>
|
|
<p class="text-12">Easy to costomize the Template!!!</p>
|
|
</div>
|
|
</div>
|
|
<template v-slot:actions>
|
|
<v-btn variant="text" @click="showSnackbar = false"> <XIcon /> </v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</template>
|