KongponentsToaster
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 ToastManager instance. All rendering is controlled from ToastManager via an intuitive, imperative api. It is recommended that you initialize ToastManager in your app via app.config.globalProperties to allow you to access it on any component instance inside your application.
// main.ts
import { createApp } from 'vue'
import { ToastManager } from '@kong/kongponents'
const app = createApp()
// Available inside any component template in the application, and also on 'this' of any component instance
app.config.globalProperties.$toaster = new ToastManager()For TypeScript, you should also augment the global property in your vue declaration file
import { ToastManager } from '@kong/kongponents'
declare module 'vue' {
interface ComponentCustomProperties {
$toaster: typeof ToastManager
}
}Once ToastManager is added as a global property, you can access it's methods via this.$toaster
<KButton @click="$toaster.open('Basic Toaster')">Open Toaster</KButton>or within the setup() function in your component
<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue'
export default defineComponent({
setup() {
const $toaster = getCurrentInstance()?.appContext.config.globalProperties.$toaster
const showToast = (name: string) => {
$toaster.open(`Wow, ${name} is looking toasty!`)
}
return { showToast }
}
})
</script>NOTE
Using getCurrentInstance is a replacement of Vue 2's Vue.prototype which is no longer present in Vue 3. As with anything global, this should be used sparingly.
If a global property conflicts with a component’s own property, the component's own property will have higher priority.
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 lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
toasterOptions: {
appearance: 'danger',
message: 'This toaster is a danger appearance',
},
}
},
methods: {
openNotification(options: Record<string, any> | string) {
this.$toaster.open(options)
}
},
})
</script>timeout
The default timeout, in milliseconds, is 5000 (5 seconds) however you can change this to by passing an override argument.
timeoutMilliseconds
<template>
<KButton @click="openNotification(toasterOptions)">Open Toaster</KButton>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
toasterOptions: {
appearance: 'success',
timeoutMilliseconds: 3000,
message: 'This toaster has a 3 second timeout'
},
}
},
methods: {
openNotification(options: Record<string, any> | string) {
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 lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
toasters: []
}
},
methods: {
openNotification(options: Record<string, any> | string) {
this.$toaster.open(options)
this.toasters = this.$toaster.toasters
}
}
})
</script>