# Toast notifications
Toast notifications are useful whenever you need to inform user about some kind of event inside your application.
Toast notification component is plugin based component and provides a programmatic interface to create notification popups.
Note
You must add <ToastNotificationsContainer/>
component somewhere in the root of your application as this will be the
container for all toast notifications. In default project it is added inside App.vue
.
You can invoke ToastNotification
by using globally available $toasts
property in any of your components. This $toasts
property is registered
as global Vue
property when toast notification plugin is added in src/components/toast/plugin.js
.
Use this.$toasts.add(configurationObject)
method to add a toast notification and this.$toasts.remove(configurationObject)
to programatically remove
toast notification. configurationObject
must be an object which can have the following properties:
- body - String for toast body text. Can include html.
- title - String for toasts head title.
- position - (default: top-right) Toast position: top-left | top-right | top-center | bottom-left | bottom-right | bottom-center.
- timeout - (default: 5000) Time in milliseconds when tooltip will be closed automatically. If set to -1 tooltip won't be closed automatically.
- closeOnClick - (default: false) Whether toast should be closed on click.
- classes - Appendable classes to toast notification
- showCloseButton - (default: true) Whether close button should be shown or not
- type - (default: primary) One of available bootstrap theme-colors: default primary secondary success info warning danger light dark
Below is a small example of ToastNotification
creation:
Positioning
Other settings
Toast notification type
<ToastNotificationsContainer/>
<Card>
<template slot="header">
Toast notifications
</template>
<div class="row">
<div class="col-sm-6">
<Input v-model="toastHeader" label="Notification header title"/>
<Input tag="textarea" v-model="toastBody" label="Notification body"/>
<Input v-model="toastAutoHideTimeout" label="Auto hide timeout in milliseconds"
info-text="Automatically hides toast after provided amount of milliseconds. If -1 is provided, toast will not be hidden"/>
</div>
<div class="col-sm-6">
<div class="row mb-2">
<div class="col-sm-12">
<h5>Positioning</h5>
</div>
<div class="col-sm-6">
<Radio v-model="toastPosition" radio-value="bottom-center">Bottom Center</Radio>
<Radio v-model="toastPosition" radio-value="bottom-right">Bottom Right</Radio>
<Radio v-model="toastPosition" radio-value="bottom-left">Bottom Left</Radio>
</div>
<div class="col-sm-6">
<Radio v-model="toastPosition" radio-value="top-center">Top Center</Radio>
<Radio v-model="toastPosition" radio-value="top-right">Top Right</Radio>
<Radio v-model="toastPosition" radio-value="top-left">Top Left</Radio>
</div>
<div class="col-sm-12 mt-4">
<h5>Other settings</h5>
</div>
<div class="col-sm-12">
<Checkbox v-model="toastShowCloseButton">Show close button</Checkbox>
<Checkbox v-model="toastCloseOnClick">Close on click</Checkbox>
</div>
<div class="col-sm-12 mt-4">
<h5>Toast notification type</h5>
<Select @change="toastType = $event" :data="toastTypes" :selected="toastType" is-searchable>
<template v-slot:placeholder="{selectedItem}">
<div class="d-flex flex-row justify-content-between align-items-center">
<div :class="[`bg-${selectedItem.toString().toLowerCase()}`, 'rounded', 'mr-2']"
style="width: 16px;height: 16px;"></div>
{{selectedItem}}
</div>
</template>
<template v-slot:default="{item}">
<div class="d-flex flex-row justify-content-between align-items-center">
<div :class="[`bg-${item.toString().toLowerCase()}`, 'rounded', 'mr-2']"
style="width: 16px;height: 16px;"></div>
<span class="mr-auto">{{item}}</span>
</div>
</template>
</Select>
</div>
</div>
<Button @click="showToast">Show toast</Button>
</div>
</div>
</Card>
<script>
export default {
name: "Tooltips",
data() {
return {
toastHeader: 'Notification title',
toastBody: 'Notification body text',
toastPosition: 'top-center',
toastAutoHideTimeout: 5000,
toastShowCloseButton: true,
toastCloseOnClick: false,
toastType: 'default',
toastTypes: [
'default',
'primary',
'secondary',
'success',
'info',
'warning',
'danger',
'light',
'dark',
],
}
},
methods: {
showToast() {
this.$toasts.add({
body: this.toastBody,
title: this.toastHeader,
position: this.toastPosition,
timeout: this.toastAutoHideTimeout,
showCloseButton: this.toastShowCloseButton,
closeOnClick: this.toastCloseOnClick,
type: this.toastType,
});
},
}
}
</script>