157 lines
3.2 KiB
Vue
157 lines
3.2 KiB
Vue
<script setup>
|
|
const isSnackbarTopStartVisible = ref(false)
|
|
const isSnackbarTopVisible = ref(false)
|
|
const isSnackbarTopEndVisible = ref(false)
|
|
const isSnackbarBottomEndVisible = ref(false)
|
|
const isSnackbarBottomVisible = ref(false)
|
|
const isSnackbarBottomStartVisible = ref(false)
|
|
const isSnackbarEndVisible = ref(false)
|
|
const isSnackbarStartVisible = ref(false)
|
|
const isSnackbarCenteredVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<!-- top -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarTopVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-up-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarTopVisible"
|
|
location="top"
|
|
>
|
|
I'm a top snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- top end -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarTopEndVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-right-up-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarTopEndVisible"
|
|
location="top end"
|
|
>
|
|
I'm a top right snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- center end -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarEndVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-right-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarEndVisible"
|
|
location="end center"
|
|
>
|
|
I'm a center end snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- bottom end -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarBottomEndVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-right-down-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarBottomEndVisible"
|
|
location="bottom end"
|
|
>
|
|
I'm a bottom end snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- bottom -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarBottomVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-down-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar v-model="isSnackbarBottomVisible">
|
|
I'm a bottom snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- bottom start -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarBottomStartVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-left-down-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarBottomStartVisible"
|
|
location="bottom start"
|
|
>
|
|
I'm a bottom start snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- center start -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarStartVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-left-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarStartVisible"
|
|
location="start center"
|
|
>
|
|
I'm a center start snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- top start -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarTopStartVisible = true"
|
|
>
|
|
<VIcon icon="ri-arrow-left-up-line" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarTopStartVisible"
|
|
location="top start"
|
|
>
|
|
I'm a top start snackbar.
|
|
</VSnackbar>
|
|
|
|
<!-- center -->
|
|
<VBtn
|
|
icon
|
|
variant="text"
|
|
@click="isSnackbarCenteredVisible = true"
|
|
>
|
|
<VIcon icon="ri-drag-move-fill" />
|
|
</VBtn>
|
|
|
|
<VSnackbar
|
|
v-model="isSnackbarCenteredVisible"
|
|
location="center"
|
|
>
|
|
I'm a center snackbar.
|
|
</VSnackbar>
|
|
</div>
|
|
</template>
|