first commit
This commit is contained in:
Inshal
812
resources/js/views/demos/components/snackbar/demoCodeSnackbar.js
Normal file
812
resources/js/views/demos/components/snackbar/demoCodeSnackbar.js
Normal file
@@ -0,0 +1,812 @@
|
||||
export const basic = { ts: `<script lang="ts" setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- SnackBar -->
|
||||
<VSnackbar v-model="isSnackbarVisible">
|
||||
Hello, I'm a snackbar
|
||||
</VSnackbar>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- SnackBar -->
|
||||
<VSnackbar v-model="isSnackbarVisible">
|
||||
Hello, I'm a snackbar
|
||||
</VSnackbar>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const multiLine = { ts: `<script lang="ts" setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar
|
||||
v-model="isSnackbarVisible"
|
||||
multi-line
|
||||
>
|
||||
I am a multi-line snackbar. I can have more than one line. This is another line that is quite long.
|
||||
|
||||
<template #actions>
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isSnackbarVisible = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
</template>
|
||||
</VSnackbar>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar
|
||||
v-model="isSnackbarVisible"
|
||||
multi-line
|
||||
>
|
||||
I am a multi-line snackbar. I can have more than one line. This is another line that is quite long.
|
||||
|
||||
<template #actions>
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isSnackbarVisible = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
</template>
|
||||
</VSnackbar>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const position = { ts: `<script lang="ts" 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>
|
||||
`, js: `<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>
|
||||
` }
|
||||
|
||||
export const timeout = { ts: `<script lang="ts" setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar
|
||||
v-model="isSnackbarVisible"
|
||||
:timeout="2000"
|
||||
>
|
||||
My timeout is set to 2000.
|
||||
</VSnackbar>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar
|
||||
v-model="isSnackbarVisible"
|
||||
:timeout="2000"
|
||||
>
|
||||
My timeout is set to 2000.
|
||||
</VSnackbar>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const transition = { ts: `<script lang="ts" 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>
|
||||
`, js: `<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>
|
||||
` }
|
||||
|
||||
export const variants = { ts: `<script lang="ts" 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>
|
||||
`, js: `<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>
|
||||
` }
|
||||
|
||||
export const vertical = { ts: `<script lang="ts" setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<VSnackbar
|
||||
v-model="isSnackbarVisible"
|
||||
vertical
|
||||
>
|
||||
Sugar plum chocolate bar halvah sesame snaps apple pie donut croissant marshmallow. Sweet roll donut gummies sesame snaps icing bear claw tiramisu cotton candy.
|
||||
|
||||
<template #actions>
|
||||
<VBtn
|
||||
color="success"
|
||||
@click="isSnackbarVisible = false"
|
||||
>
|
||||
Undo
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isSnackbarVisible = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
</template>
|
||||
</VSnackbar>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isSnackbarVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisible = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<VSnackbar
|
||||
v-model="isSnackbarVisible"
|
||||
vertical
|
||||
>
|
||||
Sugar plum chocolate bar halvah sesame snaps apple pie donut croissant marshmallow. Sweet roll donut gummies sesame snaps icing bear claw tiramisu cotton candy.
|
||||
|
||||
<template #actions>
|
||||
<VBtn
|
||||
color="success"
|
||||
@click="isSnackbarVisible = false"
|
||||
>
|
||||
Undo
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isSnackbarVisible = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
</template>
|
||||
</VSnackbar>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const withAction = { ts: `<script lang="ts" setup>
|
||||
const isSnackbarVisibility = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisibility = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar v-model="isSnackbarVisibility">
|
||||
Hello, I'm a snackbar with actions.
|
||||
|
||||
<template #actions>
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isSnackbarVisibility = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
</template>
|
||||
</VSnackbar>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isSnackbarVisibility = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isSnackbarVisibility = true">
|
||||
Open Snackbar
|
||||
</VBtn>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar v-model="isSnackbarVisibility">
|
||||
Hello, I'm a snackbar with actions.
|
||||
|
||||
<template #actions>
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isSnackbarVisibility = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
</template>
|
||||
</VSnackbar>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user