49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<script setup>
|
|
const isSnackbarFadeVisible = ref(false)
|
|
const isSnackbarScaleVisible = ref(false)
|
|
const isSnackbarScrollReverseVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<!-- fade -->
|
|
<VBtn @click="isSnackbarFadeVisible = true">
|
|
fade snackbar
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarFadeVisible"
|
|
transition="fade-transition"
|
|
location="top start"
|
|
>
|
|
I'm a fade transition snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- scale -->
|
|
<VBtn @click="isSnackbarScaleVisible = true">
|
|
Scale snackbar
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarScaleVisible"
|
|
transition="scale-transition"
|
|
location="bottom end"
|
|
>
|
|
I'm a scale transition snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- scroll y reverse -->
|
|
<VBtn @click="isSnackbarScrollReverseVisible = true">
|
|
scroll y reverse
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarScrollReverseVisible"
|
|
transition="scroll-y-reverse-transition"
|
|
location="top end"
|
|
>
|
|
I'm a scroll y reverse transition snackbar.
|
|
</VSnackbar>
|
|
</div>
|
|
</template>
|