813 lines
17 KiB
JavaScript
813 lines
17 KiB
JavaScript
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>
|
|
` }
|
|
|