first commit

resources/js/views/demos/components/snackbar/DemoSnackbarVariants.vue

@@ -0,0 +1,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>