🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Toast Vue Component

Toasts provide brief feedback about an operation through a message on the screen.

Toast Components

There are following components included:

  • Toast

Toast Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-black'
colors.bgMaterialstring'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIosstring'text-white'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
componentstring'div'

Component's HTML Element

openedbooleanfalse

Allows to open/close Toast and set its initial state

position'left' | 'right' | 'center''left'

Toast position (only on wide screens). Can be left, center or right

translucentbooleantrue

Makes Toast background translucent (with backdrop-filter: blur) in iOS theme

Toast Slots

NameDescription
button

Toast button content

Examples

Toast.vue
<template>
<k-page>
<k-navbar title="Toast" />
<k-block strong-ios outline-ios class="space-y-4">
<k-toast position="left" :opened="opened.left">
<template #button>
<k-button clear inline @click="() => (opened.left = false)">
Close
</k-button>
</template>
<div class="shrink">Hello this is left toast!</div>
</k-toast>
<k-toast position="center" :opened="opened.center">
<template #button>
<k-button clear inline @click="() => (opened.center = false)">
Close
</k-button>
</template>
<div class="shrink">Hello this is center toast!</div>
</k-toast>
<k-toast position="right" :opened="opened.right">
<template #button>
<k-button clear inline @click="() => (opened.right = false)">
Close
</k-button>
</template>
<div class="shrink">Hello this is right toast!</div>
</k-toast>
<p>
Toasts provide brief feedback about an operation through a message on
the screen.
</p>
<p>
<k-button @click="() => openToast('left')"> Toast on Left </k-button>
</p>
<p>
<k-button @click="() => openToast('center')">
Toast on Center
</k-button>
</p>
<p>
<k-button @click="() => openToast('right')"> Toast on Right </k-button>
</p>
</k-block>
</k-page>
</template>
<script>
import { ref } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kButton,
kToast,
kBlock,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kButton,
kToast,
kBlock,
},
setup() {
const opened = ref({
left: false,
center: false,
right: false,
});
const openToast = (side) => {
// close other toast
opened.value = { left: false, center: false, right: false };
opened.value[side] = true;
};
return {
openToast,
opened,
};
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.