# Toaster
KToaster - a popup notification typically used to show the result of an action. The toaster can close on its own but can also be manually dismissed.
KToaster is used via the a ToastManager instance. All rendering is controlled
from ToastManager via an intuitive, imperative api. It is recommended that you
initialize it as a singleton in your app such as this.$toaster.
import Vue from 'vue';
import { ToastManager } from '@kongponents/ktoaster';
// optional singleton to allow any part of your app access ToastManager
Vue.prototype.$toaster = new ToastManager()
Once ToastManager is registered as a singleton, you can access it's methods
via this.$toaster e.g.:
<KButton @click="$toaster.open('Basic Toaster')">Open Toaster</KButton>
# Arguments
# message
The default argument passed to the toaster is the message.
<KButton @click="$toaster.open('Default message here')">Open Toaster</KButton>
# appearance
The Toaster uses the same appearance values as KAlert and are applied the same way.
<template>
<KButton @click="openNotification(toasterOptions)">Open Toaster</KButton>
</template>
<script>
export default {
data () {
return {
toasterOptions: {
appearance: 'danger',
message: 'This toaster is a danger appearance'
}
}
},
methods: {
openNotification(options) {
this.$toaster.open(options)
}
}
}
</script>
# timeout
The default timeout is 5000ms (5 seconds) however you can change this to by passing an override argument.
timeoutMilliseconds
<template>
<KButton @click="openNotification(toasterOptions)">Open Toaster</KButton>
</template>
<script>
export default {
data () {
return {
toasterOptions: {
appearance: 'success',
timeoutMilliseconds: 3000,
message: 'This toaster has a 3 second timeout'
},
}
},
methods: {
openNotification(options) {
this.$toaster.open(options)
}
}
}
</script>
# Toaster State
You can view the current state of active toasters by calling
this.$toaster.toasters. Click the buttons below to watch the state change
[]
<template>
<KButton class="success" appearance="primary" @click="openNotification({timeoutMilliseconds: 10000, message: 'Success Notification', appearance: 'success'})">Open Toaster</KButton>
<KButton appearance="danger" @click="openNotification({'appearance': 'danger', 'message': 'Danger Notification'})">Open Toaster</KButton>
<KButton @click="openNotification('Basic Notification')">Open Toaster</KButton>
</template>
<script>
export default {
data: function () {
return {
toasters: []
}
},
methods: {
openNotification(options) {
this.$toaster.open(options)
this.toasters = this.$toaster.toasters
}
}
}
</script>