83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<script setup>
|
|
const isDefaultSnackbarVisible = ref(false)
|
|
const isTonalSnackbarVisible = ref(false)
|
|
const isTextSnackbarVisible = ref(false)
|
|
const isOutlinedSnackbarVisible = ref(false)
|
|
const isFlatSnackbarVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<!-- Default toggle btn -->
|
|
<VBtn @click="isDefaultSnackbarVisible = true">
|
|
Default
|
|
</VBtn>
|
|
|
|
<!-- Default snackbar -->
|
|
<VSnackbar
|
|
v-model="isDefaultSnackbarVisible"
|
|
location="top start"
|
|
>
|
|
Jelly chocolate bar candy canes apple pie.
|
|
</VSnackbar>
|
|
|
|
<!-- tonal toggle btn -->
|
|
<VBtn @click="isTonalSnackbarVisible = true">
|
|
tonal
|
|
</VBtn>
|
|
|
|
<!-- tonal snackbar -->
|
|
<VSnackbar
|
|
v-model="isTonalSnackbarVisible"
|
|
location="top end"
|
|
variant="tonal"
|
|
>
|
|
Ice cream cake candy canes.
|
|
</VSnackbar>
|
|
|
|
<!-- Text toggle btn -->
|
|
<VBtn @click="isTextSnackbarVisible = true">
|
|
Text
|
|
</VBtn>
|
|
|
|
<!-- Text snackbar -->
|
|
<VSnackbar
|
|
v-model="isTextSnackbarVisible"
|
|
location="end center"
|
|
variant="text"
|
|
>
|
|
Pie icing biscuit soufflé liquorice topping.
|
|
</VSnackbar>
|
|
|
|
<!-- Outline toggle btn -->
|
|
<VBtn @click="isOutlinedSnackbarVisible = true">
|
|
Outlined
|
|
</VBtn>
|
|
|
|
<!-- Outline snackbar -->
|
|
<VSnackbar
|
|
v-model="isOutlinedSnackbarVisible"
|
|
location="bottom end"
|
|
variant="outlined"
|
|
color="error"
|
|
>
|
|
Oat cake caramels sesame snaps candy.
|
|
</VSnackbar>
|
|
|
|
<!-- flat toggle btn -->
|
|
<VBtn @click="isFlatSnackbarVisible = true">
|
|
Flat
|
|
</VBtn>
|
|
|
|
<!-- flat snackbar -->
|
|
<VSnackbar
|
|
v-model="isFlatSnackbarVisible"
|
|
location="bottom start"
|
|
variant="flat"
|
|
color="error"
|
|
>
|
|
Oat cake caramels sesame snaps candy.
|
|
</VSnackbar>
|
|
</div>
|
|
</template>
|