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-toast-ios'

Toast bg in iOS theme

colors.bgMaterialstring'bg-toast-material'

Toast bg in Material theme

colors.textstring'text-white'

Toast text color

componentstring'div'

Component's HTML Element

openedstringfalse

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>
<twm-page>
<twm-navbar title="Toast" />
<twm-block strong class="space-y-4">
<twm-toast position="left" :opened="opened.left">
<template #button>
<twm-button clear inline @click="() => (opened.left = false)">
Close
</twm-button>
</template>
<div class="flex-shrink">Hello this is left toast!</div>
</twm-toast>
<twm-toast position="center" :opened="opened.center">
<template #button>
<twm-button clear inline @click="() => (opened.center = false)">
Close
</twm-button>
</template>
<div class="flex-shrink">Hello this is center toast!</div>
</twm-toast>
<twm-toast position="right" :opened="opened.right">
<template #button>
<twm-button clear inline @click="() => (opened.right = false)">
Close
</twm-button>
</template>
<div class="flex-shrink">Hello this is right toast!</div>
</twm-toast>
<p>
Toasts provide brief feedback about an operation through a message on
the screen.
</p>
<p>
<twm-button @click="() => openToast('left')">
Toast on Left
</twm-button>
</p>
<p>
<twm-button @click="() => openToast('center')">
Toast on Center
</twm-button>
</p>
<p>
<twm-button @click="() => openToast('right')">
Toast on Right
</twm-button>
</p>
</twm-block>
</twm-page>
</template>
<script>
import { ref } from 'vue';
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmButton,
twmToast,
twmBlock,
} from 'tailwind-mobile/vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmButton,
twmToast,
twmBlock,
},
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.
2021 © Tailwind Mobile by nolimits4web.