DemoSnackbarVariants.vue
1.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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>